Das Ajax-Operationsformular lädt Dateien asynchron hoch

Dieses Mal bringe ich Ihnen ein Ajax-Operationsformular zum asynchronen Hochladen von Dateien. Was sind die Vorsichtsmaßnahmen für das Ajax-Operationsformular zum asynchronen Hochladen von Dateien?

1. Ursache

Beim Erstellen einer Frontend-Seite müssen Sie zum Senden die

Post-Anfrage der WebAPI aufrufen Einige Felder und Dateien (entspricht dem asynchronen Senden des Formulars über Ajax und dem Abrufen des Rückgabeergebnisses) und dem anschließenden Abrufen des Rückgabewerts, um festzustellen, ob es erfolgreich ist.

2. Versuchen Sie es

Zuerst habe ich „jQuery Form Plugin“ ausprobiert, dieses Ding ist eine große Herausforderung, implementieren Sie es und jquery1 Die Kompatibilität von 9.2 ist nicht sehr gut. Ich habe das Problem von $.browser endlich gelöst, aber festgestellt, dass ich den Rückgabewert nicht erhalten kann, wenn ich es zum Hochladen von Dateien verwende.

$("#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 es gibt tatsächlich eine Rückgabewert, und es gibt keine Datei. Es ist auch normal. 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 habe ich 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");
});

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Spannende Informationen, bitte beachten Sie PHP Weitere verwandte Artikel auf der chinesischen Website!

Empfohlene Lektüre:

Ajax+mysq realisiert eine dreistufige Verknüpfungsliste von Provinzen und Gemeinden

Ajax überträgt Json und XML-Daten Detaillierte Erklärung der Schritte (mit Code)

Das obige ist der detaillierte Inhalt vonDas Ajax-Operationsformular lädt Dateien asynchron hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!