JavaScript natif implémente des compétences upload_javascript multi-fichiers asynchrones

Ceci est une version modifiée de l'article précédent. Vous pouvez continuer à l'utiliser tant que le code d'arrière-plan reste inchangé, mais le script n'utilise plus jQuery et est remplacé par du code JavaScript natif, nous regardons donc principalement le code JS.

Introduisez d'abord les paramètres techniques :

Technologie des pages : HTML5

Technologie backend : Servlet 3.0

Serveur : Tomcat 7.0

Script : JavaScript

HTML5 Nouveaux attributs du composant fichier

accepter : Si vous ajoutez cet attribut au composant fichier, vous pouvez contrôler directement le type de fichier téléchargé, ce qui est vraiment pratique.

multiple : Autoriser ou non la sélection de fichiers multiples
Code de la page HTML5 modifié

<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
　　<div id="son"></div>
</div>

La valeur de accept peut être trouvée dans : Types IANA MIME (une liste complète des types MIME standard). Si vous utilisez le développement DW, le logiciel lui-même aura des invites.

Si vous sélectionnez plusieurs fichiers, vous pouvez utiliser JS pour imprimer en boucle pour voir le nom, le type et la taille des fichiers

function printFileInfo(){
 
 var picFile = document.getElementById("pic"); 
 var files = picFile.files;
 for(var i=0; i<files.length; i++){
  var file = files[i];
  var div = document.createElement("div")
  div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +
  " , 文件类型："+ file.type +" , 文件大小:"+ file.size 
  document.body.appendChild( div)
 }
}

Maintenant que vous pouvez parcourir plusieurs fichiers, vous pouvez essayer de télécharger plusieurs fichiers.

1. Créez d'abord l'objet XMLHttpRequest

//Il s'agit d'une variable globale. Parce qu'il s'agit d'un exemple, cela ne détermine pas le type de navigateur. Si la version inférieure d'IE écrit comme ceci, il y aura des problèmes
var xhr = nouveau XMLHttpRequest()
2. L'article précédent présentait l'événement progress (Progress). Cette fois, deux événements, progress et error, sont implémentés

.

erreur : déclenché lorsqu'une erreur se produit dans la requête.

Correspondant à un échec d'upload provoqué par une erreur lors de l'upload : uploadFailed()

//上传失败
function uploadFailed(evt) {
 alert("上传失败");
}
　　progress：在接收相应期间持续不断触发。

　　　　　　对应上传进度方法：onprogress()
/**
 * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
 */
function onprogress(evt){
　var loaded = evt.loaded;       //已经上传大小情况 
 var tot = evt.total;       //附件总大小 
 var per = Math.floor(100*loaded/tot);   //已经上传的百分比 
　 $("#son").html( per +"%" );
 $("#son").css("width" , per +"%");
}

La dernière étape est la méthode de téléchargement. Notez que la méthode de téléchargement dans le code html ci-dessus doit également être remplacée par la méthode uploadFile() pour l'utiliser normalement.

 //上传文件
function uploadFile() {
　　//将上传的多个文件放入formData中
 var picFileList = $("#pic").get(0).files;
 var formData = new FormData();
 for(var i=0; i< picFileList.length; i++){
  formData.append("file" , picFileList[i] );
 }

 //监听事件
 xhr.upload.addEventListener("progress", onprogress, false);
 xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
 xhr.open("POST", "upload");
 //记得加入上传数据formData
　　 xhr.send(formData);
} 

PS : Après tout, il ne s'agit que d'un exemple de démonstration des fonctions de base. Il est encore loin des exigences de l'entreprise. Veuillez être prudent lorsque vous l'utilisez sur la plateforme de l'entreprise.

Vous pouvez combiner cet article pour apprendre : Comment implémenter la barre de progression du téléchargement de fichiers Ajax basée sur HTML5 (version jquery)

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.