Ajax form asynchronous file upload example code

This article mainly introduces the example code of Ajax form asynchronous uploading of files (including file fields). It is very good and has reference value. Friends who are interested should read it together

1. Cause

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

2. Try

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

$("#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 chromium browser) , but there is actually a return value, and it is normal when there is no file. 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, it was 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.

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

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

Related articles:

Cascade operation of drop-down menu

Ajax realizes three-level cascade of provinces and municipalities

Simple application based on Ajax form submission and background processing

##

The above is the detailed content of Ajax form asynchronous file upload example code. For more information, please follow other related articles on the PHP Chinese website!