Problèmes techniques rencontrés par le plug-in de téléchargement de fichiers HTML5

Résumé des problèmes techniques que j'ai rencontrés en faisant du HTML5Téléchargement de fichiersLe plug-in

Collez d'abord le code source : fileupload-html5.js (PS : La société utilise le seajs framework)

Liste des problèmes

1. jquery.ajax ne surveille pas l'événement onprogress de la progression du téléchargement.

2. XMLHttpRequest (XHR) inter-domaines

Questions et réponses

1 jQuery ne fournit pas d'interface pour l'événement onprogress, et l'objet XHR natif doit l'être. trouvé à partir d’autres interfaces.

jQuery.ajax() renvoie un objet jqXHR. jqXHR imite XHR (natif), mais n'imite pas toutes les méthodes et attributs qui implémentent XHR (comme : .upload), même si jqXHR ajoute une méthode unique (comme : .promise()). JqXHR n'est donc pas un surensemble de XHR.

//Ce qui suit est une interception du code source interne de jQ $.ajax(); renvoie ce jqXHR (faux XMLHttpRequest)

// Fake xhr
    jqXHR = {
        readyState: 0,

L'attribut de téléchargement de. XHR pointe vers XMLHttpRequestUpload ( IE10 est XMLHttpRequestEventTarget), l'événement onprogress de cet objet peut surveiller la progression du téléchargement. Étant donné que jQ ne fournit pas d'API pour cette fonction, certaines méthodes de téléchargement de données de jQ utilisent XHR, afin que nous puissions trouver XHR à partir d'autres API. La liaison de l'événement onprogress avant que XHR envoie les données peut implémenter la fonction de progression du téléchargement.

J'ai trouvé deux propriétés liées à XHR à partir de la configuration des paramètres d'options :

-xhr : rappel pour créer un objet XMLHttpRequest.

La valeur de retour de xhr() est XHR, qui est fournie à jQ, c'est-à-dire que ce XHR est utilisé pour envoyer des données. Nous pouvons créer une fonction de rappel via xhr pour l'écraser, renvoyer également XHR, mais lier l'événement onprogress ici.

//code source jQ

// 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 : Un mappage constitué d'une paire de "nom de fichier-valeur de fichier", utilisé pour définir l'objet XHR natif.

L'attribut xhrFields pointe vers le XHR créé en interne par jQ, et nous pouvons obtenir le XMLHttpRequest basé sur xhrFields. Étant donné que la valeur de xhrFields ne peut être qu'un objet json, elle ne peut pas être obtenue de la manière suivante.

//Exemple d'erreur

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

Nous pouvons utiliser l'événement onsendstart de XHR, comme suit :

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

2. cross-domain, mais nécessite une autorisation en arrière-plan.

//L'arrière-plan doit envoyer une vérification d'en-tête

if($_REQUEST['cros']) {
    header("Access-Control-Allow-Origin:请求的域名");
}

Selon l'interface fournie par l'arrière-plan, je dois ajouter un paramètre cros. Mais lorsque j'ai soumis ce paramètre avec le fichier, cela a provoqué une restriction inter-domaines. Enfin, mettez ce paramètre dans l'url.
Il s'avère que XHR a deux requêtes inter-domaines. La première est une demande de vérification. Le navigateur émet automatiquement une demande d'options basée sur l'adresse de destination de la demande. En cas de réussite, une demande de publication personnalisée peut être émise. Mettez donc les paramètres dans la requête post. La première requête n'a pas le paramètre cros, c'est-à-dire qu'elle ne peut pas passer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!