FormData object uploads files-JS Tutorial-php.cn

FormData object uploads files

PHPz

Release： 2017-04-04 13:56:07

Original

1614 people have browsed it

<a href="//m.sbmmt.com/wiki/125.html" target="_blank">For</a>mDataObject , You can use a series of key-value pairs to simulate a complete form, and then use <a href="//m.sbmmt.com/wiki/1527.html" target="_blank">XML</a>HttpRequest to send this "form"

inMozilla Developer. The website uses the FormData object and has detailed instructions for using the FormData object.

But the upload file part only has the underlying XMLHttpRequest object to send for upload. request, then how to upload through Ajax<a href="//m.sbmmt.com/wiki/1495.html" target="_blank"> of </a>jQuery
This article will introduce how to use FormData## through jQuery #Object upload file.

Form initialization

FormDataObject method upload fileHTML code

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

Copy after login

javascript

Code

$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: new FormData($('#uploadForm')[0]),
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

Copy after login

A few points to note here:

##processData

false
. Because the data value is a FormData object, there is no need to process the data #
tag.
Attribute#cache is set to
false
caching
contentType is set to <. ;form>The FormData
object constructed by the form, and the attribute
has been declared, so it is set to false here
##. #After uploading, the server-side code needs to use the query parameter named file to obtain the file input stream object, because What is declared in is name="file".
What should we do if we do not use the

form to construct the

FormData object. ? Use FormData object to add fields to upload filesHTML code

<p id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</p>

Copy after login

There is no

tag here, There is no enctype="multipart/form-data" attribute either.

javascript code

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

Copy after login

There are a few differences here: The second parameter of

##append()

should be File object, i.e. $('#file')[0].files[0].

#contentType

also needs to be set to ‘false’.

You can see an <input type="file from the code$('#file')[0].files[0] "> tag can upload multiple files,
just need to add
or
multiple= in <input type="file"> "multiple"
attribute.

Reading files on the server side

Starting from Servlet 3.0
, you can use request.getPart() or request.getPars() Two interfaces get uploaded files.

Not much to say here, for details, please refer to the official website tutorial Uploading Files with Java Servlet Technology and the example The fileupload Example Application

The above is the detailed content of FormData object uploads files. For more information, please follow other related articles on the PHP Chinese website!