Upload files through Ajax and use FormData to make Ajax requests-JS Tutorial-php.cn

This article mainly introduces the relevant information about uploading files through Ajax and using FormData to make Ajax requests. Friends in need can refer to the following

Uploading files through traditional form submission:

Html code

 测试通过Rest接口上传文件 
 指定文件名： 
 上传文件： 
 关键字1： 
 关键字2： 
 关键字3：

Copy after login

However, traditional form submission will cause the page to refresh, but in some cases, we do not want the page to be refreshed. In this case, we all use Ajax Request method:

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

Copy after login

As above, the form can be serialized through $('#postForm').serialize(), thus All parameters in the form are passed to the server.

However, in the above method, only general parameters can be passed, and the file stream of the uploaded file cannot be serialized and passed.
But now mainstream browsers have begun to support an object called FormData. With this FormData, we can easily use Ajax to upload files.

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 use some key-value pairs to simulate a series of form controls through JavaScript. We can also use the send() method of XMLHttpRequest to do it asynchronously. Submit this "form". Compared with ordinary ajax, the biggest advantage of using FormData is that we can upload a binary file asynchronously.

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

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

Here is only one way to initialize FormData through the form form

Copy after login

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.
"; } }; oReq.send(oData);

Copy after login

See: 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 such as 1.2 are not supported. It is best to use 2.0 or newer versions:

Html code

指定文件名：

上传文件：

Copy after login

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

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to upload files using jQuery Ajax

Use ajax to implement asynchronous refresh requests

Ajax php realizes three-level linkage of product classification

The above is the detailed content of Upload files through Ajax and use FormData to make Ajax requests. For more information, please follow other related articles on the PHP Chinese website!