FormData object uploads files

<a href="http://www.php.cn/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="http://www.php.cn/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="http://www.php.cn/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>

javascript

Code

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

A few points to note here:

##processData

is set to
• false

  . Because the data value is a FormData object, there is no need to process the data #

  tag.
enctype="multipart/form-data"

• Attribute#cache is set to

  false
, uploading files does not require
• caching

  contentType is set to <. ;form>The FormData

  object constructed by the form, and the attribute
enctype="multipart/form-data"
• 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>

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) {});

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
multiple
• 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!