Probleme mit jQuery-Formulardaten bei der Implementierung von Upload-Fortschrittseffekten_jquery

Zusammenfassung der technischen Probleme, die beim Erstellen des HTML5-Datei-Upload-Plug-ins aufgetreten sind

Fügen Sie zuerst den Quellcode ein: fileupload-html5.js (PS: Das Unternehmen verwendet das Seajs-Framework)

Fragenliste

1. JQUERY.AJAX überwacht nicht das ONPROGRESS-Ereignis des Upload-Fortschritts.

2. XMLHTTPREQUEST (XHR) domänenübergreifend

Fragen und Antworten

1. JQUERY stellt keine Schnittstelle für das ONPROGRESS-Ereignis bereit und das native XHR-Objekt muss über andere Schnittstellen gefunden werden.

jQuery.ajax() gibt das jqXHR-Objekt zurück. jqXHR imitiert XHR (nativ), imitiert jedoch nicht alle Methoden und Attribute, die XHR implementieren (z. B. .upload), selbst wenn jqXHR eine eindeutige Methode hinzufügt (z. B. .promise()). jqXHR ist also keine Obermenge von XHR.

//下面是截取jQ内部的源码，$.ajax();返回的就是这个jqXHR（伪造XMLHttpRequest）
// Fake xhr
 jqXHR = {

  readyState: 0,

Das Upload-Attribut von XHR verweist auf XMLHttpRequestUpload (IE10 ist XMLHttpRequestEventTarget), und das Onprogress-Ereignis dieses Objekts kann den Upload-Fortschritt überwachen. Da jQ keine API für diese Funktion bereitstellt, verwenden einige Daten-Upload-Methoden von jQ XHR, sodass wir XHR von anderen APIs finden können. Durch das Binden des onprogress-Ereignisses vor dem Senden von Daten durch XHR kann die Upload-Fortschrittsfunktion implementiert werden.

Ich habe zwei Eigenschaften im Zusammenhang mit XHR aus der OPTIONS-Parameterkonfiguration gefunden:

- XHR: Rückruf erstellt XMLHTTPREQUEST-Objekt.

Der Rückgabewert von xhr() ist XHR, der von jQ zur Verwendung bereitgestellt wird, d. h. dieser XHR wird zum Senden von Daten verwendet. Wir können über xhr eine Rückruffunktion erstellen, um sie zu überschreiben, auch XHR zurückgeben, aber das onprogress-Ereignis hier binden.

//jQ源码
// Get a new xhr
var handle, i,
 xhr = s.xhr();//[回调]在这里，下面是open方法

// Open the socket
// Passing null username, generates a login popup on Opera (#2865)
if ( s.username ) {
 xhr.open( s.type, s.url, s.async, s.username, s.password );
} else {
 xhr.open( s.type, s.url, s.async );
}

Also sollten wir das tun:

$.ajax({
 //.....
 xhr: function() {
  var xhr = $.ajaxSettings.xhr();
  //绑定上传进度的回调函数
  xhr.upload.addEventListener('progress', progress, false);
  return xhr;//一定要返回，不然jQ没有XHR对象用了
 }
});

- XHRFIELDS: Eine Zuordnung, die aus einem Paar „Dateiname-Dateiwert“ besteht und zum Festlegen nativer XHR-Objekte verwendet wird.

Das xhrFields-Attribut verweist auf das intern von jQ erstellte XHR, und wir können die XMLHttpRequest basierend auf xhrFields erhalten. Da der Wert von xhrFields nur ein JSON-Objekt sein kann, kann er nicht auf die folgende Weise abgerufen werden.

//错误例子
$.ajax({
 //......
 xhrFields: {
  upload.onprogress: function() {
   //语法错误
  }
 }
});

Wir können das onsendstart-Ereignis von XHR wie folgt verwenden:

$.ajax({
 //......
 xhrFields: {
  onsendstart: function() {
   //this是指向XHR
   this.upload.addEventListener('progress', progress, false);
  }
 }
});

2. XMLHTTPREQUESTⅡ(XHR) unterstützt domänenübergreifend, erfordert jedoch eine Hintergrundberechtigung.

//后台需发送头部验证
if($_REQUEST['cros']) {
 header("Access-Control-Allow-Origin:请求的域名");
}

Entsprechend der vom Hintergrund bereitgestellten Schnittstelle muss ich einen Parameter cros hinzufügen. Aber als ich diesen Parameter mit der Datei übermittelte, wurde ich zu domänenübergreifenden Einschränkungen aufgefordert. Fügen Sie diesen Parameter abschließend in die URL ein.

Es stellt sich heraus, dass XHR zwei domänenübergreifende Anfragen hat. Die erste ist eine Überprüfungsanfrage. Der Browser stellt automatisch eine Optionsanfrage basierend auf der Zieladresse der Anfrage aus. Bei bestandener Prüfung kann eine benutzerdefinierte Postanforderung ausgestellt werden. Geben Sie also die Parameter in die Post-Anfrage ein. Die erste Anfrage verfügt nicht über den Cros-Parameter, das heißt, sie kann nicht übergeben werden.