Comment implémenter le téléchargement de fichiers avec Ajax et form+iframe (explication détaillée avec images et texte)

Cette fois, je vais vous présenter la méthode de téléchargement de fichiers avec Ajax et form+iframe (explication détaillée avec images et texte Quelles sont les précautions pour mettre en œuvre le téléchargement de fichiers avec). Ajax et form+iframe? , ce qui suit est un cas pratique, jetons un coup d'oeil.

Depuis l'avènement du HTML5, le téléchargement de fichiers est devenu 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 packagé :

function fileUpload(options) {
var opts = options || {};
var func = function() {};
this.fileInput = opts.fileInput || null;
this.url = opts.url || '';
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('file', 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);
}
}
};

Je pense que vous avez également vu que formData apparaît dans le code. C'est la magie de 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 également un 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 entre domaines. Si vous devez répondre à ces deux scénarios commerciaux, essayez la méthode suivante. formulaire 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>

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

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

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

Comment obtenir la valeur de retour pour effectuer l'étape suivante ? 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 :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment beforeSend améliore l'expérience utilisateur

Méthode de requête asynchrone Ajax pour JSON dans l'environnement SpringMVC

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!