Comment implémenter le téléchargement d'images asynchrones en javascript

Je vais expliquer en détail comment écrire le téléchargement d'images asynchrones via javascript et partager l'exemple de code avec vous. Les lecteurs intéressés peuvent le tester.

Regardons d'abord la partie soumission de formulaire implémentée par le code HTML. Lors du test, vous devez remplacer l'URL de test par la vôtre, ou vous pouvez écrire directement une adresse locale à tester.

Code HTML :

<form id="uploadForm" action="http://storage.test.com/file/upload" method="post" enctype="multipart/form-data">
  <input type="hidden" name="key" id="key" value="VTZ18HM64#D_L3WX" />
  <input type="file" name="uploadFiles" value="" id="fileImage" multiple=&#39;multiple&#39; />
  <p class="upload_submit">
  <button type="button" id="fileSubmit" class="upload_btn">保存</button>
  </p>
</form>

Code js :

var Fileupload = {
  fileInput: $("#fileImage").get(0),
  dragDrop: $("#fileDragArea").get(0),
  upButton: $("#fileSubmit").get(0),
  url: $("#uploadForm").attr("action"),
  })(),
  //文件上传
  funUploadFile: function() {
   var self = this;
   for (var i = 0, file; file = this.fileFilter[i]; i++) {
    (function(file) {
     var xhr = new XMLHttpRequest();
     if (xhr.upload) {
      // 上传中
      xhr.upload.addEventListener("progress", function(e) {
       self.onProgress(file, e.loaded, e.total);
      }, false);
      // 文件上传成功或是失败
      xhr.onreadystatechange = function(e) {

      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
         self.onSuccess(JSON.parse(xhr.responseText));
         self.funDeleteFile(file);
         if (!self.fileFilter.length) {
          //全部完毕
          self.onComplete();
         }
        } else {
         self.onFailure(file, xhr.responseText);
        }
       }
      };
      //准备FormData对象
      var myForm = document.getElementById('uploadForm');
      //将文件放入FormData对象中
      formData = new FormData(myForm);

      // 开始上传
      xhr.open("POST", self.url, true);
      xhr.send(formData);
     }
    })(file);
   }
  },
  init: function() {
   var self = this；
   //上传按钮提交
   if (this.upButton) {
    console.log('提示： 当前存储服务器地址', this.url)
    this.upButton.addEventListener("click", function(e) {
     self.funUploadFile(e);
    }, false);
   }
   self.bindEvent();
  }
 };
 Fileupload = $.extend(Fileupload);
 Fileupload.init();

FormData télécharge des fichiers de manière asynchrone

<input type="file" id="file">

1. Créez FormData et placez-le. dans la liste d'attente Téléchargez des fichiers

//准备FormData对象
var formData = new FormData(),
 uploadFile = document.getElementById('file');
 
//将文件放入FormData对象中 
formData.append('file', uploadFile.files[0]);

2. Envoyez les données FormData au serveur via

//创建xhr对象
var xhr = new XMLHttpRequest();

//监听文件上传进度
xhr.upload.onprogress = function(evt){
 //lengthComputabel: 文件长度是否可计算
 if(evt.lengthComputable){
  //evt.loaded: 已下载的字节数
  //evt.total: 文件总字节数
  var percent = Math.round(evt.loaded*100/evt.total);
  console.log(percent);
 }
}

//监听文件传输开始 
xhr.onloadstart = function(evt）{
  xhr.abort() //终止上传
}

//监听ajax成功完成事件
xhr.onload = function(evt){
 ...
}

//监听ajax错误事件 
xhr.onerror = function(evt){
 ...
}

//监听ajax被中止事件
xhr.onabort = function(evt){
 ...
}

//监听传输结束事件: 不管成功或者失败都会触发
xhr.onloaded = function(evt){
 ...
}
 
//*发起ajax请求数据
xhr.open('POST', '/url', true);
xhr.send(formData);

Articles associés :

Comment implémenter le tri json monocouche par ordre alphabétique des clés (tutoriel détaillé)

Comment utiliser le statique dans le répertoire de ressources Thinkjs3

À propos de l'analyse et du tri des données clé-valeur dans JsonObject (tutoriel détaillé)

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!