Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-04-26 11:20:35
original
1876 Les gens l'ont consulté

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

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

Nous devrions donc faire ceci :

$.ajax({
 //.....
 xhr: function() {
  var xhr = $.ajaxSettings.xhr();
  //绑定上传进度的回调函数
  xhr.upload.addEventListener('progress', progress, false);
  return xhr;//一定要返回,不然jQ没有XHR对象用了
 }
});
Copier après la connexion

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

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

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!

É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