Explication détaillée de l'exemple de code de téléchargement de fichier asynchrone du formulaire Ajax

Cet article présente principalement l'exemple de code de téléchargement asynchrone de fichiers sous forme Ajax (y compris les champs de fichiers). Il est très bon et a une valeur de référence. Les amis intéressés devraient y jeter un œil.

1. Cause

Lors de la création d'une page frontale, vous devez appeler la requête Post de WebAPI, envoyer des champs et des fichiers (équivalent à l'envoi du formulaire de manière asynchrone via ajax et obtenir le résultat renvoyé), puis get La valeur de retour détermine si l'opération réussit.

2. Essayez

J'ai d'abord essayé le "jQuery Form Plugin". Ce truc est un énorme piège. Ce n'est pas très bon d'obtenir la compatibilité avec jquery1.9.2, d'accord ? Il est facile de résoudre le problème de $.browser, mais j'ai constaté que son utilisation pour télécharger des fichiers n'obtenait pas la valeur de retour.

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

Par exemple, le code ci-dessus, mais comment le configurer, tant que le fichier est uploadé, le msg renvoyé en cas de succès doit être nul (sous le navigateur chrome), mais là est en fait une valeur de retour, et c'est normal même s'il n'y a pas de fichier. Ce qui est encore plus effrayant, c'est la valeur de retour Json lorsque vous êtes invité à télécharger sous IE/EDGE.

J'ai parcouru le code source de jquery.form.js et j'ai découvert qu'il s'agissait d'un pseudo-Ajax implémenté en utilisant Iframe. Ce n'est pas authentique.

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

Ce sont deux fonctions différentes qui sont appelées lorsqu'il y a un fichier ou non.

3. Solution

Après de nombreuses anti-enquêtes, nous avons constaté que xhr (XMLHttpRequest) est une bonne chose. Après les tests, les navigateurs grand public et les navigateurs mobiles prennent en charge cette fonctionnalité. Ce qui suit présente la méthode d'obtention de l'objet XMLHttpRequest natif pour télécharger le formulaire (fichier) dans l'ajax de jquery/zepto. Article de référence : 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");
});

Recommandations associées :

Exemple de téléchargement de fichiers asynchrones Ajax Partage de code

Utilisation de jQuery pour télécharger de manière asynchrone le partage d'utilisation du plugin de fichiers

Explication détaillée de la façon dont PHP utilise ajax pour implémenter la fonction de téléchargement asynchrone fichiers (images)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!