Exemple de code de téléchargement de fichier asynchrone de formulaire Ajax-js tutoriel-php.cn

Exemple de code de téléchargement de fichier asynchrone de formulaire Ajax

亚连

Libérer： 2018-05-23 14:58:25

original

1380 Les gens l'ont consulté

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 le lire ensemble

<.> 1. Cause

Lors de la création d'une page front-end, 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 obtenez le résultat renvoyé), puis obtenez La valeur de retour détermine si l'opération réussit.

2. Essayez

J'ai d'abord essayé "jQuery Form Plugin", ce truc est un énorme gouffre, réalisez-le La compatibilité avec jquery1.9.2, ce n'est pas très bon. J'ai finalement résolu le problème de $.browser et j'ai constaté que je ne parvenais pas à obtenir la valeur de retour lors du téléchargement de fichiers en l'utilisant.

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

Copier après la connexion

Par exemple, le code ci-dessus, mais comment le configurer, tant que le fichier est téléchargé, le msg est renvoyé avec succès doit être nul (navigateur Chrome (ci-dessous), mais il y a en fait une valeur de retour, et c'est normal lorsqu'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 = $(&#39;input:file&#39;, 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);

Copier après la connexion

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, il a été 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.

function AjaxForm(formID, options) {
var form = $(formID);
//将form对象直接作为参数 new FormData对象
var formData = new FormData(form[0]);
$("input[type=&#39;file&#39;]").forEach(function (item, i) {
//获取file对象 即相当于可以直接post的$_FILES数据
var domFile = $(item)[0].files[0];
//追加file 对象
formData.append(&#39;file&#39;, 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");
});

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.