Le formulaire d'opération Ajax télécharge des fichiers de manière asynchrone

Cette fois, je vais vous apporter un formulaire d'opération Ajax pour télécharger des fichiers de manière asynchrone. Quelles sont les précautions pour le formulaire d'opération Ajax pour télécharger des fichiers de manière asynchrone, jetons un coup d'œil.

1. Cause

Lors de la création d'une page frontale, vous devez appeler la Demande de publication de WebAPI pour envoyer certains champs et fichiers (cela équivaut à envoyer le formulaire de manière asynchrone via ajax et à obtenir le résultat de retour), puis à obtenir la valeur de retour pour déterminer s'il réussit.

2. Essayez

J'ai d'abord essayé "jQuery Form Plugin", ce truc est un énorme gouffre, implémentez-le et jquery1 La compatibilité. de 9.2 n'est pas très bon. J'ai finalement résolu le problème de $.browser, mais j'ai constaté que je ne parvenais pas à obtenir la valeur de retour lorsque je l'utilisais pour télécharger des fichiers.

$("#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 il y a en fait un valeur de retour, et il n'y a pas de fichier C'est également normal. 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 contre-enquêtes, j'ai trouvé 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");
});

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. informations passionnantes, veuillez faire attention à php Autres articles connexes sur le site Web chinois !

Lecture recommandée :

Ajax+mysq réalise une liste de liaison à trois niveaux de provinces et de municipalités

Ajax transmet Json et données xml Explication détaillée des étapes (avec code)

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!