Detaillierte Erläuterung des Beispielcodes für den asynchronen Datei-Upload im Ajax-Formular

In diesem Artikel wird hauptsächlich der Beispielcode für das asynchrone Hochladen von Dateien (einschließlich Dateifeldern) vorgestellt. Interessierte Freunde sollten einen Blick darauf werfen.

1. Ursache

Beim Erstellen einer Front-End-Seite müssen Sie die Post-Anfrage von WebAPI aufrufen, einige Felder und Dateien senden (entspricht dem asynchronen Senden des Formulars über Ajax) und abrufen das Rückgabeergebnis) und dann get Der Rückgabewert bestimmt, ob es erfolgreich ist.

2. Versuchen Sie es

Zuerst habe ich das „jQuery Form Plugin“ ausprobiert. Es ist nicht sehr gut, die Kompatibilität mit jquery1.9.2 zu erreichen, okay? Es ist einfach, das Problem von $.browser zu lösen, aber ich habe festgestellt, dass die Verwendung zum Hochladen von Dateien nicht den Rückgabewert erhält.

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

Zum Beispiel der obige Code, aber wie man ihn konfiguriert: Solange die Datei hochgeladen wird, muss die erfolgreich zurückgegebene Nachricht null sein (unter dem Chromium-Browser), aber da ist eigentlich ein Rückgabewert und es ist normal, auch wenn keine Datei vorhanden ist. Was noch erschreckender ist, ist der Json-Rückgabewert, wenn man zum Herunterladen unter IE/EDGE aufgefordert wird.

Ich habe den Quellcode von jquery.form.js durchgesehen und festgestellt, dass es sich um eine Pseudo-Ajax-Implementierung mit Iframe handelt. Es ist nicht authentisch.

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

Dies sind zwei verschiedene Funktionen, die aufgerufen werden, wenn eine Datei vorhanden ist oder nicht.

3. Lösung

Nach vielen Anti-Untersuchungen haben wir festgestellt, dass xhr (XMLHttpRequest) eine gute Sache ist. Nach dem Test unterstützen sowohl Mainstream-Browser als auch mobile Browser dieses Ding. Im Folgenden wird die Methode zum Abrufen des nativen XMLHttpRequest-Objekts zum Hochladen des Formulars (der Datei) im Ajax von jquery/zepto vorgestellt. Referenzartikel: 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");
});

Verwandte Empfehlungen:

Ajax-Asynchron-Datei-Upload-Beispiel Code-Sharing

Verwenden von jQuery zum asynchronen Hochladen der Datei-Plugin-Nutzungsfreigabe

Detaillierte Erläuterung, wie PHP Ajax verwendet, um die Funktion des asynchronen Hochladens zu implementieren Dateien (Bilder)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispielcodes für den asynchronen Datei-Upload im Ajax-Formular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!