Ajax operation form asynchronously uploads files

This time I will bring you an Ajax operation form to upload files asynchronously. What are the precautions for Ajax operation form to asynchronously upload files? The following is a practical case, let's take a look.

1. Cause

When making the front page, you need to call the Post request of WebAPI to send some fields and files (It is equivalent to sending the form asynchronously through ajax and getting the return result), and then getting the return value to determine whether it is successful.

2. Try

#First I tried "jQuery Form Plugin", this thing is a huge pit, implement it and jquery1. The compatibility of 9.2 is not very good. I finally solved the problem of $.browser, but found that I can’t get the return value when using it to upload files.

$("#view").submit(
$("#view").ajaxSubmit({
type: "post",
url: "../api/Article/Add",
dataType: "json",
success: function (msg) {
console.log(msg);
},
error: function (msg) {
$("#resultBox").html("连接服务器失败");
console.log(msg);
}
})
);

For example, the above code, but how to configure it, as long as the file is uploaded, the msg returned in success must be null (under the chromium browser), but there is actually a return value, and it is normal when there is no file. of. What's even more frightening is the Json return value when prompted to download under IE/EDGE.

I looked through the source code of jquery.form.js and found that it is a pseudo-Ajax implemented using Iframe. It is unclear. Pass!

// are there files to upload?
var files = $('input:file', this).fieldValue();
var found = false;
for (var j=0; j < files.length; j++)
if (files[j]) 
found = true;
if (options.iframe || found) // options.iframe allows user to force iframe mode
fileUpload();
else
$.ajax(options);

These are two different functions that are called when there is a file or not.

3. Solution

After many anti-investigations, we found that xhr (XMLHttpRequest) is a good thing. After testing, both mainstream browsers and mobile browsers support this thing. The following introduces the method of obtaining the native XMLHttpRequest object to upload the form (file) in jquery/zepto's ajax. Reference article: http://www.jb51.net/article/91267.htm

function AjaxForm(formID, options) {
var form = $(formID);
//将form对象直接作为参数 new FormData对象
var formData = new FormData(form[0]);
$("input[type='file']").forEach(function (item, i) {
//获取file对象 即相当于可以直接post的$_FILES数据
var domFile = $(item)[0].files[0];
//追加file 对象
formData.append('file', domFile);
})
if (!options)options = {};
options.url = options.url ? options.url : form.attr("action");
options.type = options.type ? options.type : form.attr("method");
options.data = formData;
options.processData = false; // tell jQuery not to process the data
options.contentType = false; // tell jQuery not to set contentType
options.xhr = options.xhr ? options.xhr : function () {
//这是关键 获取原生的xhr对象 做以前做的所有事情
var xhr = $.ajaxSettings.xhr();
xhr.upload.onload = function () {
console.log("onload");
}
xhr.upload.onprogress = function (ev) {
if (ev.lengthComputable) {
var percent = 100 * ev.loaded / ev.total;
console.log(percent, ev)
}
}
return xhr;
};
options.success = options.success ? options.success : function (data) {
alert(data)
};
$.ajax(options);
}
//调用
$("#sub").click(function (e) {
AjaxForm("#myForm");
});

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese website Other related articles!

Recommended reading:

Ajax+mysq realizes the three-level linkage list of provinces and municipalities

Ajax transmits Json and xml data Detailed explanation of the steps (with code)

The above is the detailed content of Ajax operation form asynchronously uploads files. For more information, please follow other related articles on the PHP Chinese website!