Natives JavaScript implementiert asynchrone Javascript-Fähigkeiten zum Hochladen mehrerer Dateien

Dies ist eine modifizierte Version des vorherigen Artikels. Sie können es weiterhin verwenden, solange der Hintergrundcode unverändert bleibt. Das Skript verwendet jedoch kein jQuery mehr und wird durch nativen JavaScript-Code ersetzt. Daher betrachten wir hauptsächlich den JS-Code.

Stellen Sie zunächst die technischen Parameter vor:

Seitentechnologie: HTML5

Backend-Technologie: Servlet 3.0

Server: Tomcat 7.0

Skript: JavaScript

HTML5 Neue Attribute der Dateikomponente

akzeptieren: Wenn Sie dieses Attribut zur Dateikomponente hinzufügen, können Sie den hochgeladenen Dateityp direkt steuern, was sehr praktisch ist.

mehrere: Ob die Auswahl mehrerer Dateien zugelassen werden soll
HTML5-Seitencode geändert

<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>

Der Wert von Accept kann gefunden werden in: IANA MIME-Typen (eine vollständige Liste der Standard-MIME-Typen). Wenn Sie die DW-Entwicklung verwenden, verfügt die Software selbst über Eingabeaufforderungen.

Wenn Sie mehrere Dateien auswählen, können Sie JS zum Drucken in einer Schleife verwenden, um den Namen, den Typ und die Größe der Dateien anzuzeigen. Sehen Sie sich den Democode an.

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)
 }
}

Da Sie nun mehrere Dateien durchlaufen können, können Sie versuchen, mehrere Dateien hochzuladen.

1. Erstellen Sie zunächst das XMLHttpRequest-Objekt

//Dies ist eine globale Variable. Da es sich um ein Beispiel handelt, wird der Browsertyp nicht bestimmt. Wenn die niedrigere Version des IE so schreibt, treten Probleme auf
var xhr = new XMLHttpRequest()
2. Im vorherigen Artikel wurde das Fortschrittsereignis (Progress) eingeführt. Dieses Mal werden zwei Ereignisse, Fortschritt und Fehler, implementiert

Fehler: Wird ausgelöst, wenn in der Anfrage ein Fehler auftritt.

Entspricht einem Upload-Fehler, der durch einen Fehler beim Hochladen verursacht wurde: 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 +"%");
}

Der letzte Schritt ist die Upload-Methode. Beachten Sie, dass die Upload-Methode im obigen HTML-Code auch in die Methode uploadFile() geändert werden muss, um sie normal verwenden zu können.

 //上传文件
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: Dies ist schließlich nur ein Demonstrationsbeispiel für grundlegende Funktionen. Es ist noch weit von den Anforderungen des Unternehmens entfernt. Bitte seien Sie vorsichtig, wenn Sie es auf der Unternehmensplattform verwenden.

Sie können diesen Artikel kombinieren, um Folgendes zu erfahren: So implementieren Sie den Fortschrittsbalken des Ajax-Datei-Uploads basierend auf HTML5 (JQuery-Version)

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.