Problèmes rencontrés par jQuery+formdata lors de la mise en œuvre de la progression du téléchargement effect_jquery

Résumé des problèmes techniques que j'ai rencontrés lors de la création du plug-in de téléchargement de fichiers HTML5

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

Liste de questions

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 être trouvé à partir d'autres interfaces.

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

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

  readyState: 0,

L'attribut upload de XHR pointe vers XMLHttpRequestUpload (IE10 est XMLHttpRequestEventTarget), et 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 OPTIONS :

- XHR : Le rappel crée 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.

//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 );
}

Nous devrions donc faire ceci :

$.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 des objets XHR natifs.

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.

//错误例子
$.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. XMLHTTPREQUESTⅡ(XHR) prend en charge plusieurs domaines, mais nécessite une autorisation en arrière-plan.

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

Selon l'interface fournie par le background, je dois ajouter un paramètre cros. Mais lorsque j'ai soumis ce paramètre avec le fichier, des restrictions inter-domaines ont été demandées. 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.