FormData+Ajax implémente la surveillance de la progression du téléchargement

Le type FormData est en fait défini au niveau 2 de XMLHttpRequest, ce qui facilite la sérialisation des tables et la création de données dans le même format que le formulaire (pour la transmission XHR, bien sûr). Ensuite, je partagerai avec vous FormData+Ajax pour mettre en œuvre le suivi de la progression du téléchargement via cet article. Les amis qui en ont besoin peuvent jeter un œil ensemble

Qu'est-ce que FormData ?

L'objet FormData peut assembler un ensemble de paires clé/valeur utilisées pour envoyer des requêtes à l'aide de XMLHttpRequest. Cela rend l'envoi de données de formulaire plus flexible et plus pratique car il peut être utilisé indépendamment du formulaire. Si vous définissez le type d'encodage du formulaire sur multipart/form-data, le format de données transmis via FormData est le même que le format de données transmis par le formulaire via la méthode submit() ; 🎜>Comment créer un objet FormData

Vous pouvez créer vous-même un objet FormData puis ajouter des champs en appelant sa méthode append(), comme ceci :

Remarque : Champs "userfile" et "webmasterfile" contiennent un fichier. Le champ "userid" est un type numérique, qui sera converti en type chaîne par la méthode FormData.append() (le type de champ de l'objet FormData. peut être Blob, File ou string : Si son type de champ n'est ni Blob ni File, il sera converti en type chaîne

//实例化一个formData对象
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("userid", 123456); // 数字 123456 会被立即转换成字符串 "123456"
// HTML上的 文件类型input[type=file]的文件框，由用户选择
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like 对象
var content = &#39;<a id="a"><b id="b">hey!</b></a>&#39;; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);

Utilisez la méthode Ajax de jQuery pour envoyer des données FormData<.>

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir Articles connexes :

//记录当前时间
var time=new Date().getTime();
//记录当前进度
var percentage =null;
//记录当前上传速度
var velocity=null;
//记录已上传文件字节大小
var loaded=0;
$.ajax({
 url: 'Url',
 type: "POST",
 data: formData,
 contentType: false, // 必须 不设置内容类型
 processData: false, // 必须 不处理数据
 xhr: function xhr() {
  //获取原生的xhr对象
  var xhr = $.ajaxSettings.xhr();
  if (xhr.upload) {
   //添加 progress 事件监听
   xhr.upload.addEventListener('progress', function (e) {
    var nowDate = new Date().getTime();
    //每一秒刷新一次状态
    if (nowDate - time >= 1000) {
     //已上传文件字节数/总字节数
     percentage = parseInt(e.loaded / e.total * 100);
     //当前已传大小(字节数)-一秒前已传文件大小(字节数)
     velocity = (e.loaded - loaded) / 1024;
     if (percentage >= 99) {
      $(".hintText").html('服务端正在解析，请稍后');
     } else {
      //修改上次记录时间及数据大小
      time = nowDate;
      loaded = e.loaded;
     }
    } else {
     return;
    }
   }, false);
  }
  return xhr;
 },
 success: function success(response) {
  //成功回调   
 },
 error: function error(error) {
  //失败回调    
 }
});

.

ajax

fichier d'implémentation fileupload.js. Téléchargez (avec le code d'étape)

php pour obtenir la méthode des en-têtes et l'instance de contenu de ajax

ajaxfileupload.js implémente le téléchargement de fichiers (avec code étape)

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!