Maison > interface Web > Tutoriel H5 > le corps du texte

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

零下一度
Libérer: 2017-06-17 15:38:08
original
1433 Les gens l'ont consulté

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,
Copier après la connexion

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对象用了    }});
Copier après la connexion

- 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() {
            //语法错误
        }
    }
});
Copier après la connexion

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

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

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:请求的域名");
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!