Detailed explanation of 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 take a look at it. I hope it can help everyone.

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 pitfall. It is not very good to achieve compatibility with jquery1.9.2. Is it good? It is easy to solve the problem of $.browser, but I found that using it to upload files does not get the return value.

$("#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 there is no file time is also normal. 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 not authentic. 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. 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");
});

Related recommendations:

Ajax asynchronous file upload example code sharing

Sharing the usage of plug-in to upload files asynchronously using jQuery

Detailed explanation of how to use ajax to upload files (pictures) asynchronously in php

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