Heim Web-Frontend js-Tutorial FormData+Ajax-Upload-Fortschrittsüberwachung (mit Code)

FormData+Ajax-Upload-Fortschrittsüberwachung (mit Code)

Mar 30, 2018 pm 05:19 PM
代码 监控

Dieses Mal zeige ich Ihnen die Überwachung des Upload-Fortschritts von FormData+Ajax (mit Code).

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: Hinweis: Felder Sowohl „userfile“ als auch „webmasterfile“ enthalten eine Datei. Das Feld „userid“ ist ein numerischer Typ, der von der FormData.append()-Methode (dem Feldtyp des FormData-Objekts) in einen String-Typ konvertiert wird kann Blob, Datei oder Zeichenfolge sein: 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
//实例化一个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 = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte beachten Sie andere verwandte Artikel zum Thema php Chinesische Website für spannendere Inhalte!
//记录当前时间
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) {
  //失败回调    
 }
});
Nach dem Login kopieren

Empfohlene Lektüre:

Ajax+Servlet zur Implementierung einer Dropdown-Verknüpfung ohne Aktualisierung (mit Code)

So verwenden Sie Ajax, um asynchron zu prüfen, ob der Benutzername dupliziert ist

Das obige ist der detaillierte Inhalt vonFormData+Ajax-Upload-Fortschrittsüberwachung (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was tun, wenn der Bluescreen-Code 0x0000001 auftritt? Was tun, wenn der Bluescreen-Code 0x0000001 auftritt? Feb 23, 2024 am 08:09 AM

Was tun, wenn der Bluescreen-Code 0x0000001 auftritt?

So lösen Sie Win7-Treibercode 28 So lösen Sie Win7-Treibercode 28 Dec 30, 2023 pm 11:55 PM

So lösen Sie Win7-Treibercode 28

Der Computer zeigt häufig einen Bluescreen an und der Code ist jedes Mal anders Der Computer zeigt häufig einen Bluescreen an und der Code ist jedes Mal anders Jan 06, 2024 pm 10:53 PM

Der Computer zeigt häufig einen Bluescreen an und der Code ist jedes Mal anders

Beheben Sie den Fehlercode 0xc000007b Beheben Sie den Fehlercode 0xc000007b Feb 18, 2024 pm 07:34 PM

Beheben Sie den Fehlercode 0xc000007b

Universal-Fernbedienungscode-Programm von GE auf jedem Gerät Universal-Fernbedienungscode-Programm von GE auf jedem Gerät Mar 02, 2024 pm 01:58 PM

Universal-Fernbedienungscode-Programm von GE auf jedem Gerät

Was bedeutet der Bluescreen-Code 0x000000d1? Was bedeutet der Bluescreen-Code 0x000000d1? Feb 18, 2024 pm 01:35 PM

Was bedeutet der Bluescreen-Code 0x000000d1?

Ausführliche Erläuterung der Ursachen und Lösungen des Bluescreen-Codes 0x0000007f Ausführliche Erläuterung der Ursachen und Lösungen des Bluescreen-Codes 0x0000007f Dec 25, 2023 pm 02:19 PM

Ausführliche Erläuterung der Ursachen und Lösungen des Bluescreen-Codes 0x0000007f

C#-Entwicklungsratschläge: Protokollierungs- und Überwachungssysteme C#-Entwicklungsratschläge: Protokollierungs- und Überwachungssysteme Nov 22, 2023 pm 08:30 PM

C#-Entwicklungsratschläge: Protokollierungs- und Überwachungssysteme

See all articles