jQuery+formdata crée des effets de progression du téléchargement (avec code d'étape)

Cette fois, je vais vous apporter jQuery+formdata pour créer des effets de progression de téléchargement (avec des codes d'étape). Quelles sont les notes pour utiliser jQuery+formdata pour créer des effets de progression de téléchargement. Voici des cas pratiques. jetez un oeil.

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 (tels que : .upload), même si jqXHR ajoute une méthode unique (telle que : .promise()). JqXHR n'est donc pas un surensemble 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 du paramètre 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 : Une paire de mappages "nom de fichier-valeur de fichier", utilisés 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, 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 de publication. La première requête n'a pas le paramètre cros, c'est-à-dire qu'elle ne peut pas passer.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment créer un bouton de lien de menu avec le plug-in jQuery EasyUI

Explication détaillée de l'utilisation du plug-in jqURL de JQuery

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!