ajax uploads form data

Posted by SueHubert on Sat, 01 Jun 2019 21:12:20 +0200

Upload files through traditional form submission:
  1. <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">  
  2.      <h1 >Test pass Rest Interface upload file </h1>  
  3.      <p >Specify the file name: <input type ="text" name="filename" /></p>  
  4.      <p >Upload files: <input type ="file" name="file" /></p>  
  5.      <p >Keyword 1: <input type ="text" name="keyword" /></p>  
  6.      <p >Keyword 2: <input type ="text" name="keyword" /></p>  
  7.      <p >Keyword 3: <input type ="text" name="keyword" /></p>  
  8.      <input type ="submit" value="upload"/>  
  9. </form>  

 

However, the traditional form submission will lead to page refresh, but in some cases, we do not want the page refreshed, at this time we all use Ajax to request:
  1. $.ajax({  
  2.      url : "http://localhost:8080/STS/rest/user",  
  3.      type : "POST",  
  4.      data : $( '#postForm').serialize(),  
  5.      success : function(data) {  
  6.           $( '#serverResponse').html(data);  
  7.      },  
  8.      error : function(data) {  
  9.           $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);  
  10.      }  
  11. });  

 

As above, form forms can be serialized by $(' postForm').serialize() to pass all the parameters in the form to the server.
 
However, in the above way, only general parameters can be passed, and the file stream of uploaded files can not be serialized and passed.
But now mainstream browsers are starting to support an object called FormData, with which 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 FormData objects, we can use JavaScript to simulate a series of form controls with some key-value pairs. We can also use XMLHttpRequest's send() Method to submit this "form" asynchronously. Compared with ordinary ajax, the biggest advantage of using FormData is that we can upload a binary file asynchronously.
 
Later 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

 

 

Here's just one way to initialize FormData through the from form
<form enctype="multipart/form-data" method="post" name="fileinfo">
  1. var oData = new FormData(document.forms.namedItem("fileinfo" ));  
  2. oData.append( "CustomField", "This is some extra data" );  
  3. var oReq = new XMLHttpRequest();  
  4. oReq.open( "POST", "stash.php" , true );  
  5. oReq.onload = function(oEvent) {  
  6.       if (oReq.status == 200) {  
  7.           oOutput.innerHTML = "Uploaded!" ;  
  8.      } else {  
  9.           oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";  
  10.      }  
  11. };  
  12. oReq.send(oData);  

 

See also: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
 
 
Using FormData, make Ajax requests and upload files
JQuery is used here, but older versions of JQuery, such as 1.2, are not supported. It is better to use 2.0 or newer versions:
  1. <form id= "uploadForm">  
  2.       <p >Specify the file name: <input type="text" name="filename" value= ""/></p >  
  3.       <p >Upload files: <input type="file" name="file"/></ p>  
  4.       <input type="button" value="upload" onclick="doUpload()" />  
  5. </form>  

 

  1. function doUpload() {  
  2.      var formData = new FormData($( "#uploadForm" )[0]);  
  3.      $.ajax({  
  4.           url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,  
  5.           type: 'POST',  
  6.           data: formData,  
  7.           async: false,  
  8.           cache: false,  
  9.           contentType: false,  
  10.           processData: false,  
  11.           success: function (returndata) {  
  12.               alert(returndata);  
  13.           },  
  14.           error: function (returndata) {  
  15.               alert(returndata);  
  16.           }  
  17.      });  
  18. }  

Topics: REST JQuery Javascript Firefox

Hot Topics

©2024 Programmer Think