Beispielcode für den asynchronen Datei-Upload im Ajax-Formular

Dieser Artikel stellt hauptsächlich den Beispielcode für das asynchrone Hochladen von Dateien (einschließlich Dateifeldern) vor. Interessierte Freunde sollten ihn gemeinsam lesen

1. Ursache

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

2. Probieren Sie es aus

Zuerst habe ich das „jQuery Form Plugin“ ausprobiert, dieses Ding ist ein riesiges Problem, erkennen Sie die Kompatibilität mit jquery1.9.2 ist nicht sehr gut. Ich habe schließlich das Problem von $.browser gelöst und festgestellt, dass ich beim Hochladen von Dateien damit keinen Rückgabewert erhalten kann.

$("#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 Nachricht erfolgreich zurückgegeben werden null (unter dem Chromium-Browser), aber es gibt tatsächlich einen Rückgabewert, und es ist normal, wenn keine Datei vorhanden ist. Was noch beängstigender 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 wurde festgestellt, dass xhr (XMLHttpRequest) eine gute Sache ist. Nach dem Test unterstützen Mainstream-Browser und 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.

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

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Kaskadierende Bedienung des Dropdown-Menüs

Ajax realisiert die dreistufige Kaskadierung von Provinzen und Gemeinden

Einfache Anwendung basierend auf Ajax-Formularübermittlung und Hintergrundverarbeitung

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