jquery+HTML5+Ajax implementiert die Datei-Upload-Funktion mit Fortschrittsbalken

Dieses Mal bringen wir Ihnen jquery+HTML5+Ajax, um die Funktion Datei-Upload mit einem Fortschrittsbalken zu implementieren. jquery+HTML5+Ajax implementiert die zu beachtenden HinweiseWas sind sie? Hier sind praktische Fälle.

Zunächst verwendet HTML5 AJAX zum Übermitteln von Daten. Zuerst müssen Sie ein neues Objekt lernen, das in HTML5 hinzugefügt wurde: FormData

Das FormData-Objekt kann die Append-Methode verwenden, um Schlüsselwertdaten hinzuzufügen , was sich von dem JSON unterscheidet, das wir zuvor üblicherweise verwendet haben. Es ist möglich, dass Binärdateien asynchron hochgeladen werden können.

1. Erstellung des FormDate-Objekts

var formData = new FormData();

2. Hinzufügen von Daten zum FormDate-Objekt

formData.append("catname", "我是一只喵");
formData.append("age", 1); 　　　　　　　　// 数字类型会转为字符串类型
// 可以增加上传的二进制文件，比如fileInputElement对象中已经包含了用户所选择的文件
formData.append("userfile", fileInputElement.files[0]);
//也可以将一个 Blob 对象添加到 formData 中
var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; 
var oBlob = new Blob([oFileBody], { type: "text/xml"});
formData.append("webmasterfile", oBlob);

3. Verwenden Sie das FormData-Objekt

var xhr = new XMLHttpRequest();
xhr.open("POST", "upload");
xhr.send(formData);

HTML-Teil

Nach der kurzen Einführung des FormData-Objekts werfen wir einen Blick auf das HTML Code der Seite. So schreiben Sie

<img width="400" height="250"/><br /> 
<input type="file" id="pic" name="pic" onchange="showPic()"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br /> 
<p id="parent">
 <p id="son"></p>
</p>

Das p unten wird zur Anzeige des Fortschrittsbalkens verwendet, daher ist der entsprechende CSS-Stil erforderlich. Der Stil ist wie folgt, die Farbe sieht nicht gut aus, ändern Sie sie selbst:

<style type="text/css"> 
 #parent{width:550px; height:10px; border:2px solid #09F;} 
 #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} 
</style>

JS-Teil

Das Highlight ist hier Nach dem Laden von jquery Schauen wir uns die Seite an, schauen wir uns das JavaScript an. Ja, wie man es schreibt, zuerst ist die onchange-Ereignismethode der Dateikomponente:

function showPic(){
 var pic = $("#pic").get(0).files[0];
 $("img").prop("src" , window.URL.createObjectURL(pic) );
}

Die erste Zeile von showPic dient dazu, die hochgeladene Datei aus dem Dateiobjekt abzurufen . Die zweite Zeile legt das src-Attribut für img fest. Sie können eine sofortige Vorschau des Effekts auf der Seite erhalten.

Bevor wir uns die Methode uploadFile ansehen, wollen wir kurz etwas über den Fortschritt von Fortschrittsereignissen (Progress Events) erfahren...

Die Progress Events-Spezifikation ist ein Arbeitsentwurf des W3C, definierte Ereignisse im Zusammenhang mit der Client-Server-Kommunikation. Diese Ereignisse waren ursprünglich auf XHR-Operationen ausgerichtet, werden aber mittlerweile auch von anderen APIs verwendet. Es gibt die folgenden 6 Fortschrittsereignisse.

loadstart: Wird ausgelöst, wenn das erste Byte der entsprechenden Daten empfangen wird.
Fortschritt: Wird kontinuierlich während des Zeitraums des Empfangs der Antwort ausgelöst. // Schauen wir uns nur einen
Fehler an: Wird ausgelöst, wenn in der Anfrage ein Fehler auftritt.
abort: Wird ausgelöst, wenn der Link aufgrund des Aufrufs der abort()-Methode beendet wird.
Laden: Wird ausgelöst, wenn die entsprechenden Daten vollständig empfangen wurden.
Loadend: Wird ausgelöst, nachdem die Kommunikation abgeschlossen ist oder ein Fehler-, Abbruch- oder Ladeereignis ausgelöst wird.

Das Fortschrittsereignis wird von Mozilla übermittelt. Dieses Ereignis wird regelmäßig ausgelöst, während der Browser neue Daten empfängt. Das onprogress-Ereignishandlerprogramm empfängt ein Ereignisobjekt, dessen Zielattribut ein XHR-Objekt ist, aber drei zusätzliche Attribute enthält:

lengthComputable: ein boolescher Wert, der angibt, ob Fortschrittsinformationen verfügbar sind

Position: Gibt die Anzahl der empfangenen Bytes an

totalSize: Gibt die erwartete Anzahl von Bytes an, die basierend auf dem entsprechenden Content-Length-Header ermittelt wird.

Mit diesen Informationen können wir eine Fortschrittsanzeige für den Benutzer erstellen. Aber das Problem tritt erneut auf: Die Ajax-Methode von jQuery hat keine Operationen für das Fortschrittsereignis. Wie funktioniert das?~

Glücklicherweise habe ich durch Konsultation der Informationen herausgefunden, dass das XMLHttpRequest-Objekt, das von der Ajax-Methode von jQuery aufgerufen wird, angegeben werden kann! ! !

Schauen Sie sich Zeile 8453 an, das ist alles. Daher erhält der Code im Ajax-Teil der uploadFile-Methode diesen Stil.

Der wichtigste Teil des Codes:

function uploadFile(){
　　
　　// 获取上传文件，放到 formData对象里面
　　var pic = $("#myhead").get(0).files[0];
　　var formData = new FormData();
 formData.append("file" , pic);
　　$.ajax({
　　　　type: "POST",
　　　　url: "upload",
　　　　data: formData ,　　//这里上传的数据使用了formData 对象
　　　　processData : false, 
　　　　//必须false才会自动加上正确的Content-Type 
　　　　contentType : false , 
　　　　
　　　　//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
　　　　xhr: function(){
　　　　　　var xhr = $.ajaxSettings.xhr();
　　　　　　if(onprogress && xhr.upload) {
　　　　　　　　xhr.upload.addEventListener("progress" , onprogress, false);
　　　　　　　　return xhr;
　　　　　　}
　　　　} 
　　});
}

Fügen Sie abschließend die onprogress-Methode hinzu, um die gesamte Funktion abzuschließen.

/**
 * 侦查附件上传情况 ,这个方法大概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 +"%");
}

Zuletzt ist zum einfachen Vergleich der Code der gesamten Seite beigefügt.

<!DOCTYPE html>
<html>
 <head>
 <title>html5_2.html</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <style type="text/css"> 
  #parent{width:550px; height:10px; border:2px solid #09F;} 
  #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} 
 </style>
 <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
 <script type="text/javascript">
 function showPic(){
  var pic = $("#pic").get(0).files[0];
  $("img").prop("src" , window.URL.createObjectURL(pic) );
  uploadFile();
 }
 function uploadFile(){
  var pic = $("#pic").get(0).files[0];
  var formData = new FormData();
  formData.append("file" , pic);
  /** 
   * 必须false才会避开jQuery对 formdata 的默认处理 
   * XMLHttpRequest会对 formdata 进行正确的处理 
   */ 
  $.ajax({
   type: "POST",
   url: "upload",
   data: formData ,
   processData : false, 
   //必须false才会自动加上正确的Content-Type 
   contentType : false , 
   xhr: function(){
    var xhr = $.ajaxSettings.xhr();
    if(onprogress && xhr.upload) {
     xhr.upload.addEventListener("progress" , onprogress, false);
     return xhr;
    }
   } 
  });
 }
 /**
  * 侦查附件上传情况 ,这个方法大概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 +"%");
 }
 </script>
 </head>
 <body>
 <img width="400" height="250"/><br /> 
 <input type="file" id="pic" name="pic" onchange="showPic()"/>
 <input type="button" value="上传图片" onclick="uploadFile()" /><br /> 
 <p id="parent">
  <p id="son"></p>
 </p> 
 </body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Implementieren des Datei-Uploads mit Jquery+LigerUI

Detaillierte Erläuterung von jquery dynamisches Laden von JS-Dateien

So lesen Sie XML-Dateiinhalte mit jQuery

Das obige ist der detaillierte Inhalt vonjquery+HTML5+Ajax implementiert die Datei-Upload-Funktion mit Fortschrittsbalken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!