Technische Probleme beim HTML5-Datei-Upload-Plug-in

Zusammenfassung der technischen Probleme, auf die ich bei HTML5 gestoßen binDatei-UploadDas Plug-in

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

Problemliste

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 vorhanden sein von anderen Schnittstellen gefunden.

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.

//Das Folgende ist ein Abfangen des internen Quellcodes von jQ $.ajax(); gibt dieses jqXHR (falsche XMLHttpRequest) zurück

// 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 über andere 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 in der Optionsparameterkonfiguration zwei Eigenschaften gefunden, die sich auf XHR beziehen:

-xhr: Rückruf zum Erstellen eines XMLHttpRequest-Objekts.

Der Rückgabewert von xhr() ist XHR, der von jQ verwendet werden kann, 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-Quellcode

// Get a new xhrvar 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 );}
所以我们应该这样做：
$.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 des nativen XHR-Objekts verwendet wird.

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

//Fehlerbeispiel

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

//Der Hintergrund muss eine Header-Überprüfung senden

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, führte dies zu einer domänenübergreifenden Einschränkung. 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 gibt automatisch eine Optionsanfrage basierend auf der Zieladresse der Anfrage aus. Bei Bestehen kann eine individuelle Post-Anfrage 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.

Das obige ist der detaillierte Inhalt vonTechnische Probleme beim HTML5-Datei-Upload-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!