Uploading files via Ajax using Formdata for AJAX requests _ajax related

Upload files by using a traditional form form submission:

HTML code

<form id= "Uploadform" action= "Http://localhost:8080/cfJAX_RS/rest/file/upload" "method=" post "enctype =" multipart /form-data "> 
   
 
 

However, the traditional form submission will cause the page to refresh, but in some cases we don't want the page to be refreshed, and we all use Ajax to make the request:

JS Code

$.ajax ({ 
   URL: "Http://localhost:8080/STS/rest/user", 
   Type: "POST", 
   Data: $ (' #postForm '). Serialize (), 
   success:function (data) { 
     $ (' #serverResponse '). HTML (data); 
   }, 
   error:function (data) { 
     $ (' # Serverresponse '). HTML (data.status + ":" + Data.statustext + ":" + Data.responsetext); 
   } 

As above, through $ (' #postForm '). Serialize () can serialize form forms so that all parameters in form forms are passed to the service side.

But the above way, can only pass the general parameter, the file stream of the uploading file cannot be serialized and passed.
But now mainstream browsers are starting to support an object called Formdata, and with this formdata we can easily upload files using Ajax.

About Formdata and its usage

What is Formdata? Let's take a look at the introduction on Mozilla.

XMLHttpRequest Level 2 Adds a new interface formdata. Using the Formdata object, we can simulate a series of form controls using JavaScript with some key-value pairs, and we can also use the XMLHttpRequest send () method to commit the "form" asynchronously. The great advantage of using formdata is that we can upload a binary file asynchronously compared to ordinary Ajax.

Newer versions of all major browsers already support this object, such as Chrome 7+, Firefox 4+, IE 10+, Opera 12+, Safari 5+.

See also: Https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData

This shows only one way to initialize formdata through the From form

<form enctype= "Multipart/form-data" method= "post" name= "FileInfo" >

JS Code

var oData = new FormData (Document.forms.namedItem ("FileInfo")); 
Odata.append ("CustomField", "This is some extra data"); 
var oreq = new XMLHttpRequest (); 
Oreq.open ("POST", "stash.php", true); 
Oreq.onload = function (oevent) { 
   if (Oreq.status =) { 
     ooutput.innerhtml = ' uploaded! '; 
   } else { 
     Oou tput.innerhtml = "Error" + oreq.status + "occurred uploading your file.<br \/>"; 
 

See also: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

Use Formdata to make Ajax requests and upload files

jquery is used here, but older versions of jquery like 1.2 are not supported, preferably with a 2.0 or newer version:

HTML code

<form id= "Uploadform" > 
   <p > Specify filename: <input type= "text" name= "filename" value= ""/></p > 
   <p > Uploading files: <input type= "file" name= "file"/></p> <input type= 
   "button" value= "Upload" onclick= " Doupload () "/> 

JS Code

function Doupload () { 
   var formData = new FormData ($ ("#uploadForm") [0]); 
   $.ajax ({ 
     URL: ' http://localhost:8080/cfJAX_RS/rest/file/upload ', 
     type: ' POST ', 
     data:formdata, 
     Async:false, 
     Cache:false, 
     contenttype:false, 
     processdata:false, 
     success:function (returndata) { 
       alert (returndata); 
     }, 
     error:function (returndata) { 
       alert (returndata); 
     } 
   }); 

The above is a small set to introduce the Ajax way to upload files using formdata Ajax request all the narration, hope to help everyone, if you have any questions welcome to my message, small series will promptly reply to everyone!