Uploading files using Formdata objects via jquery Ajax

FormDataobject, you can use a series of key-value pairs to simulate a complete form, and then use the XMLHttpRequest "form" to send it.

Use the Formdata object on the Mozilla Developer website for detailed FormData object usage instructions.

But the upload file part only the bottom XMLHttpRequest object sends the upload request, then how jQuery to pass the Ajax upload?
This article describes jQuery FormData uploading files by using objects.

Use <form>Form initialization FormDataObject Mode upload File

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

Here are a few things to note:

• processDataSet to false . Because the data value is an FormData object, you do not need to process the data.
• <form>tag to add a enctype="multipart/form-data" property.
• cacheSet to false , the upload file does not need to be cached.
• contentTypeSet to false . This is set to false because it is an <form> object constructed by a form, and the FormData property has already been declared enctype="multipart/form-data" .

After uploading, the server-side code needs to use the file get file input stream object from the query parameter name, because <input> it is declared in name="file" .

<form>What if I didn't construct the object with a form FormData ?

Use FormDataObject add field mode upload file

HTML code

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

There are no <form> tags and no enctype="multipart/form-data" attributes.

JavaScript code

var formData = new formData (); Formdata.append ( ' file ', $ ( ' #file ') [0].files[ 0]); $.ajax ({url:  '/upload ', type:  ' POST ', cache: false, data:formdata, processdata: false, Span class= "hljs-attr" >contenttype: false}). Done (function (res) {}). Fail (function (res) {});          

Here are a few places that are different:

• append()The second parameter should be a file object, that is $(‘#file‘)[0].files[0] .
• contentTypeAlso set to ' false '.

From the code $(‘#file‘)[0].files[0] you can see <input type="file"> that a tag can upload multiple files,
You only need to <input type="file"> add multiple or multiple="multiple" attribute in.

Server-side Read file

From the Servlet 3.0 beginning, request.getPart() the uploaded file can be obtained via or request.getPars() two interfaces.
Here is not much to say, please refer to the official website tutorial uploading Files with Java Servlet technology and example the FileUpload Example application

Reference

• Https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
• Http://stackoverflow.com/questions/10292382/html-5-formdata-and-java-servlets
• Https://docs.oracle.com/javaee/7/tutorial/servlets011.htm#BABFGCHB
• Https://docs.oracle.com/javaee/7/tutorial/servlets016.htm#BABDGFJJ

Uploading files using Formdata objects via jquery Ajax