Upload files using Ajax and use FormData for Ajax requests.

Upload files using Ajax and use FormData for Ajax requests.

Upload files using the traditional form submission method:

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 refresh the page, but in some cases, we do not want the page to be refreshed. In this case, we use Ajax for 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 shown above, the form can be serialized using $ ('# postform'). serialize () to pass all parameters in the form to the server.

However, the above method can only pass common parameters. The file stream uploaded to the file cannot be serialized and transmitted.
However, mainstream browsers now support an object named FormData. With this FormData, we can easily upload files using Ajax.

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 use JavaScript to simulate a series of Form Controls with some key-value pairs. We can also use the send () method of XMLHttpRequest to asynchronously submit this "form ". compared with normal ajax, the biggest advantage of using FormData is that we can upload a binary file asynchronously.

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

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

Only one method for initializing FormData through the from form is shown here.
<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 == 200) {      oOutput.innerHTML = "Uploaded!" ;    } else {      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";    } }; oReq.send(oData); 
See https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

Use FormData for Ajax requests and upload files
JQuery is used here, But JQuery of earlier versions such as 1.2 is not supported. It is best to use 2.0 or an updated version:
Html code

<Form id = "uploadForm"> <p> specify the file name: <input type = "text" name = "filename" value = ""/> </p> <p> upload a file: <input type = "file" name = "file"/> </p> <input type = "button" value = "Upload" onclick = "doUpload () "/> </form>
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 section describes all the Ajax requests for uploading files using FormData through Ajax. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in time!