jquery+HTML5+Ajax implémente la fonction de téléchargement de fichiers avec barre de progression

Cette fois, nous vous proposons jquery+HTML5+Ajax pour implémenter la fonction téléchargement de fichiers avec une barre de progression jquery+HTML5+Ajax implémente les notes à noterQu'est-ce que c'est ? Voici des cas pratiques.

Tout d'abord, HTML5 utilise AJAX pour soumettre des données. Tout d'abord, vous devez apprendre un nouvel objet ajouté en HTML5 : FormData

L'objet FormData peut utiliser la méthode append pour ajouter des données clé-valeur. , ce qui est différent du json que nous utilisions couramment auparavant. Ce qui est possible, c'est que les fichiers binaires puissent être téléchargés de manière asynchrone.

1. Création de l'objet FormDate

var formData = new FormData();

2. Ajout de données à l'objet FormDate

formData.append("catname", "我是一只喵");
formData.append("age", 1); 　　　　　　　　// 数字类型会转为字符串类型
// 可以增加上传的二进制文件，比如fileInputElement对象中已经包含了用户所选择的文件
formData.append("userfile", fileInputElement.files[0]);
//也可以将一个 Blob 对象添加到 formData 中
var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; 
var oBlob = new Blob([oFileBody], { type: "text/xml"});
formData.append("webmasterfile", oBlob);

3. Utilisez l'objet FormData

var xhr = new XMLHttpRequest();
xhr.open("POST", "upload");
xhr.send(formData);

Partie HTML

Après la brève introduction de l'objet FormData, jetons un œil au HTML code de la page. Comment écrire

<img width="400" height="250"/><br /> 
<input type="file" id="pic" name="pic" onchange="showPic()"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br /> 
<p id="parent">
 <p id="son"></p>
</p>

Le p en bas sert à afficher la barre de progression, le style css correspondant est donc obligatoire. Le style est le suivant, la couleur n'est pas belle, changez-la vous-même :

<style type="text/css"> 
 #parent{width:550px; height:10px; border:2px solid #09F;} 
 #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} 
</style>

Partie JS

Le point culminant est ici Après avoir chargé jquery sur. la page, regardons le JavaScript. Oui Comment l'écrire, est d'abord la méthode d'événement onchange du composant fichier :

function showPic(){
 var pic = $("#pic").get(0).files[0];
 $("img").prop("src" , window.URL.createObjectURL(pic) );
}

La première ligne de showPic consiste à obtenir le fichier téléchargé à partir de l'objet fichier. . La deuxième ligne définit l'attribut src pour img. Vous pouvez obtenir un aperçu instantané de l'effet sur la page.

Avant d'examiner la méthode uploadFile, apprenons brièvement la progression des événements de progression (Progress Events)...

La spécification Progress Events est une ébauche de travail du W3C, définie sur les événements. liés à la communication client-serveur. Ces événements étaient initialement destinés aux opérations XHR, mais sont actuellement utilisés par d'autres API. Il y a les 6 événements de progression suivants.

loadstart : Déclenché lorsque le premier octet des données correspondantes est reçu.
progression : Déclenché en continu pendant la période de réception de la réponse. //Regardons juste une
erreur : déclenchée lorsqu'une erreur se produit dans la requête.
abort : déclenché lorsque le lien est terminé en raison de l'appel de la méthode abort().
chargement : déclenché lorsque les données correspondantes complètes sont reçues.
Loadend : déclenché une fois la communication terminée ou une erreur, un abandon ou un événement de chargement est déclenché.

L'événement de progression est soumis par Mozilla. Cet événement sera déclenché périodiquement pendant que le navigateur reçoit de nouvelles données. Le programme onprogress gestionnaire d'événements recevra un objet événement, dont l'attribut cible est un objet XHR, mais contient trois attributs supplémentaires :

lengthComputable : une valeur booléenne indiquant si les informations de progression sont disponibles

position : Indique le nombre d'octets reçus.

totalSize : Indique le nombre d'octets attendu déterminé en fonction de l'en-tête Content-Length correspondant.

Avec ces informations, nous pouvons créer un indicateur de progression pour l'utilisateur. Mais le problème revient, la méthode ajax de jQuery n'a aucune opération sur l'événement progress. Comment ça marche~~

Heureusement, en consultant les informations, j'ai découvert que l'objet XMLHttpRequest appelé par la méthode ajax de jQuery peut être spécifié ! ! !

Regardez la ligne 8453, c'est tout. Le code devient donc ce style dans la partie ajax de la méthode uploadFile.

La partie la plus importante du code :

function uploadFile(){
　　
　　// 获取上传文件，放到 formData对象里面
　　var pic = $("#myhead").get(0).files[0];
　　var formData = new FormData();
 formData.append("file" , pic);
　　$.ajax({
　　　　type: "POST",
　　　　url: "upload",
　　　　data: formData ,　　//这里上传的数据使用了formData 对象
　　　　processData : false, 
　　　　//必须false才会自动加上正确的Content-Type 
　　　　contentType : false , 
　　　　
　　　　//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
　　　　xhr: function(){
　　　　　　var xhr = $.ajaxSettings.xhr();
　　　　　　if(onprogress && xhr.upload) {
　　　　　　　　xhr.upload.addEventListener("progress" , onprogress, false);
　　　　　　　　return xhr;
　　　　　　}
　　　　} 
　　});
}

Enfin, ajoutez la méthode onprogress pour conclure toute la fonction.

/**
 * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
 */
function onprogress(evt){
　　var loaded = evt.loaded;     //已经上传大小情况 
 var tot = evt.total;      //附件总大小 
 var per = Math.floor(100*loaded/tot);  //已经上传的百分比 
　　$("#son").html( per +"%" );
 $("#son").css("width" , per +"%");
}

Enfin, le code de la page entière est joint pour faciliter la comparaison.

<!DOCTYPE html>
<html>
 <head>
 <title>html5_2.html</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <style type="text/css"> 
  #parent{width:550px; height:10px; border:2px solid #09F;} 
  #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} 
 </style>
 <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
 <script type="text/javascript">
 function showPic(){
  var pic = $("#pic").get(0).files[0];
  $("img").prop("src" , window.URL.createObjectURL(pic) );
  uploadFile();
 }
 function uploadFile(){
  var pic = $("#pic").get(0).files[0];
  var formData = new FormData();
  formData.append("file" , pic);
  /** 
   * 必须false才会避开jQuery对 formdata 的默认处理 
   * XMLHttpRequest会对 formdata 进行正确的处理 
   */ 
  $.ajax({
   type: "POST",
   url: "upload",
   data: formData ,
   processData : false, 
   //必须false才会自动加上正确的Content-Type 
   contentType : false , 
   xhr: function(){
    var xhr = $.ajaxSettings.xhr();
    if(onprogress && xhr.upload) {
     xhr.upload.addEventListener("progress" , onprogress, false);
     return xhr;
    }
   } 
  });
 }
 /**
  * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
  */
 function onprogress(evt){
  var loaded = evt.loaded;     //已经上传大小情况 
  var tot = evt.total;      //附件总大小 
  var per = Math.floor(100*loaded/tot);  //已经上传的百分比 
  $("#son").html( per +"%" );
  $("#son").css("width" , per +"%");
 }
 </script>
 </head>
 <body>
 <img width="400" height="250"/><br /> 
 <input type="file" id="pic" name="pic" onchange="showPic()"/>
 <input type="button" value="上传图片" onclick="uploadFile()" /><br /> 
 <p id="parent">
  <p id="son"></p>
 </p> 
 </body>
</html>

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 :

Explication détaillée des étapes de mise en œuvre du téléchargement de fichiers avec Jquery+LigerUI

Explication détaillée de jquery chargement dynamique des fichiers js

Comment lire le contenu d'un fichier XML avec 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!