FormData+Ajax implementiert die Überwachung des Upload-Fortschritts

Der FormData-Typ ist tatsächlich auf XMLHttpRequest-Ebene 2 definiert, was die Serialisierung von Tabellen und die Erstellung von Daten im gleichen Format wie das Formular erleichtert (natürlich für die XHR-Übertragung). Als nächstes werde ich FormData + Ajax mit Ihnen teilen, um die Überwachung des Upload-Fortschritts in diesem Artikel zu implementieren. Freunde, die es benötigen, können gemeinsam einen Blick darauf werfen

Was ist FormData?

Das FormData-Objekt kann eine Reihe von Schlüssel/Wert-Paaren zusammenstellen, die zum Senden von Anforderungen mithilfe von XMLHttpRequest verwendet werden. Das Versenden von Formulardaten wird dadurch flexibler und komfortabler, da es unabhängig vom Formular genutzt werden kann. Wenn Sie den Kodierungstyp des Formulars auf „multipart/form-data“ festlegen, ist das über FormData übertragene Datenformat dasselbe wie das vom Formular über die Methode „submit()“ übertragene Datenformat 🎜>So erstellen Sie ein FormData-Objekt

Sie können selbst ein FormData-Objekt erstellen und dann Felder hinzufügen, indem Sie dessen append()-Methode aufrufen, etwa so:

//实例化一个formData对象
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("userid", 123456); // 数字 123456 会被立即转换成字符串 "123456"
// HTML上的 文件类型input[type=file]的文件框，由用户选择
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like 对象
var content = &#39;<a id="a"><b id="b">hey!</b></a>&#39;; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);

Hinweis : Die Felder „userfile“ und „webmasterfile“ enthalten beide eine Datei. Das Feld „userid“ ist vom numerischen Typ, der von der FormData.append()-Methode in einen String-Typ konvertiert wird (der Feldtyp des FormData-Objekts kann sein). Blob, Datei oder Zeichenfolge: Wenn der Feldtyp weder Blob noch Datei ist, wird er in einen Zeichenfolgentyp konvertiert

Verwenden Sie die Ajax-Methode von jQuery, um FormData-Daten zu senden

//记录当前时间
var time=new Date().getTime();
//记录当前进度
var percentage =null;
//记录当前上传速度
var velocity=null;
//记录已上传文件字节大小
var loaded=0;
$.ajax({
 url: 'Url',
 type: "POST",
 data: formData,
 contentType: false, // 必须 不设置内容类型
 processData: false, // 必须 不处理数据
 xhr: function xhr() {
  //获取原生的xhr对象
  var xhr = $.ajaxSettings.xhr();
  if (xhr.upload) {
   //添加 progress 事件监听
   xhr.upload.addEventListener('progress', function (e) {
    var nowDate = new Date().getTime();
    //每一秒刷新一次状态
    if (nowDate - time >= 1000) {
     //已上传文件字节数/总字节数
     percentage = parseInt(e.loaded / e.total * 100);
     //当前已传大小(字节数)-一秒前已传文件大小(字节数)
     velocity = (e.loaded - loaded) / 1024;
     if (percentage >= 99) {
      $(".hintText").html('服务端正在解析，请稍后');
     } else {
      //修改上次记录时间及数据大小
      time = nowDate;
      loaded = e.loaded;
     }
    } else {
     return;
    }
   }, false);
  }
  return xhr;
 },
 success: function success(response) {
  //成功回调   
 },
 error: function error(error) {
  //失败回调    
 }
});

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird. Verwandte Artikel:

ajax

fileupload.js-Implementierung des Datei-Uploads (mit Schritten)

php ruft die Header-Methode und die Inhaltsinstanz von ajax

ajaxfileupload js zum Implementieren des Datei-Uploads (mit Schrittcode)

Das obige ist der detaillierte Inhalt vonFormData+Ajax implementiert die Überwachung des Upload-Fortschritts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!