Explication détaillée de la façon d'implémenter le téléchargement de fichiers à l'aide d'Ajax et form+iframe-js tutoriel-php.cn

Explication détaillée de la façon d'implémenter le téléchargement de fichiers à l'aide d'Ajax et form+iframe

亚连

Libérer： 2018-05-24 10:34:19

original

1488 Les gens l'ont consulté

La fonction de téléchargement de fichiers est souvent utilisée dans les projets. Cet article vous présentera deux implémentations de téléchargement de fichiers-Ajax et form+iframe. Les amis intéressés peuvent apprendre ensemble

Depuis l'introduction de html5, Le téléchargement de fichiers devient très simple. Il est très pratique de résoudre la fonction de téléchargement de fichiers qui doit être utilisée dans le projet. HTML5 prend en charge plusieurs téléchargements d'images, les téléchargements ajax, les aperçus d'images avant le téléchargement et le téléchargement d'images par glisser-déposer. Il est purement implémenté à l'aide du contrôle de fichier et contient très peu de code JS.

Téléchargement HTML5Ajax

La mise en œuvre du téléchargement HTML5 nécessite un contrôle de fichier et une requête XMLHttpRequest. Ce qui suit est un plug-in de téléchargement que j'ai empaqueté :

function fileUpload(options) {
var opts = options || {};
var func = function() {};
this.fileInput = opts.fileInput || null;
this.url = opts.url || &#39;&#39;;
this.fileList = [];
this.onFilter = opts.onFilter || function(f) {return f;}; //选择文件组的过滤方法
this.onSelect = opts.onSelect || func; //文件选择后
this.onProgress = opts.onProgress || func; //文件上传进度
this.onSuccess = opts.onSuccess || func; //文件上传成功时
this.onFailure = opts.onFailure || func; //文件上传失败时;
this.onComplete = opts.onComplete || func; //文件全部上传完毕时
this.init();
}
fileUpload.prototype = {
dealFiles: function(e) { //获取要上传的文件数组（用户选择文件后执行）
var files = e.target.files || e.dataTransfer.files;
this.fileList = this.onFilter(files);
for(var i = 0, file; file = this.fileList[i]; i++){ //增加唯一索引值
file.index = i;
}
this.onSelect(this.fileList);
return this;
},
removeFile: function(fileDelete) { //删除某一个文件
var arrFile = [];
for(var i = 0, file; file = this.fileList[i]; i++){
if (file != fileDelete) {
arrFile.push(file);
}
}
this.fileList = arrFile;
return this;
},
removeAll: function() { //清空文件队列
this.fileList = [];
return this;
},
uploadFile: function() { //上传文件
var me = this;
for(var i = 0, file; file = this.fileList[i]; i++){
(function(file) {
var formData = new FormData();
var xhr = new XMLHttpRequest();
if (xhr.upload) {
xhr.upload.addEventListener("progress", function(e) { // 上传中
me.onProgress(file, e.loaded, e.total);
}, false);
xhr.onreadystatechange = function(e) { // 文件上传成功或是失败
if (xhr.readyState == 4) {
if (xhr.status == 200) {
me.onSuccess(file, xhr.responseText);
me.removeFile(file);
if (!me.fileList.length) {
me.onComplete(); //上传全部完毕。执行回调
}
} else {
me.onFailure(file, xhr.responseText);
}
}
};
// 开始上传
formData.append(&#39;file&#39;, file);
xhr.open("POST", me.url, true);
xhr.send(formData);
}
})(file);
}
},
init: function() {
var me = this;
//文件选择控件选择
if (me.fileInput) {
me.fileInput.addEventListener("change", function(e) { me.dealFiles(e); }, false);
}
}
};

Copier après la connexion

Je crois que vous avez également vu que formData apparaît dans le code. C'est la magie du lieu HTML5. Avec l'aide de formData, vous pouvez facilement implémenter la fonction de téléchargement multi-fichiers asynchrone sans actualiser et prendre en charge les images d'aperçu. De plus, il est gratifiant que de nombreux navigateurs prennent désormais en charge HTML5.

Mais ! ! ! Les versions inférieures à ie9 ne sont pas prises en charge ! !

De plus, la méthode ci-dessus présente un autre inconvénient. Parce qu'elle utilise la méthode de téléchargement ajax, elle ne peut pas prendre en charge le téléchargement inter-domaines. Si vous devez répondre à ces deux scénarios commerciaux, essayez la méthode suivante. et iframe à télécharger. Regardons de plus près :

formulaire soumis à iframe

code html :

<iframe name="demoIframe" style="display:none"></iframe>
<form target="demoIframe" action="upload.php" method="post" enctype="multipart/form-data">
<input class="filename" type="file" name="fileLabel">
<input type="submit" value="提交">
</form>

Copier après la connexion

Nous cliquons sur Soumettre et vous pouvez voir la demande suivante :

Le fichier a été téléchargé. Ensuite, l'ajout de cette interface upload.php est disponible, et si le téléchargement réussit, il retournera :

{
"code": "200",
"success": true,
"data": {
...
}
}

Copier après la connexion

Comment pouvons-nous obtenir la valeur de retour ? , alors quelle est la prochaine étape ? Parce que nous l'avons téléchargé sur une iframe, nous n'avons besoin que d'écouter l'événement de chargement de l'iframe, s'il y a une valeur de retour, nous pouvons l'obtenir pour un traitement ultérieur. Regardez le code js :

$(&#39;iframe&#39;).on(&#39;load&#39;, function() {
var responseText = $(&#39;iframe&#39;)[0].contentDocument.body.textContent;
var responseData = JSON.parse(responseText) || {};
if (responseData.isSuccess == true || responseData.code == 200) {
//success
} else {
//error 
}
});

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir. .