Javascript implementation of asynchronous image upload method example-JS Tutorial-php.cn

Javascript implementation of asynchronous image upload method example

小云云

Release： 2017-12-06 11:07:11

Original

1523 people have browsed it

How to write asynchronous image upload through javascript? In this article, we will share with you some example code javascript to implement asynchronous image upload. Let’s first look at the form submission part implemented by HTML code. When testing, you need to replace the test URL with your own, or you can directly write a local address to test.

html code:

<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>

Copy after login

js code:

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(&#39;uploadForm&#39;);
      //将文件放入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(&#39;提示： 当前存储服务器地址&#39;, this.url)
    this.upButton.addEventListener("click", function(e) {
     self.funUploadFile(e);
    }, false);
   }
   self.bindEvent();
  }
 };
 Fileupload = $.extend(Fileupload);
 Fileupload.init();

Copy after login

FormData asynchronously uploads files

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

Copy after login

1. Create FormData and put the file to be uploaded

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

Copy after login

2. Send FormData data to the server through xhr to implement file upload

//创建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(&#39;POST&#39;, &#39;/url&#39;, true);
xhr.send(formData);

Copy after login

The above content is an example of asynchronous image upload method in JavaScript. I hope it can help everyone.

Related recommendations:

php+js implements asynchronous image uploading example sharing

JavaScript uses FileReader to complete image uploading and previewing function introduction

Detailed explanation of how node.js implements simple image upload code

The above is the detailed content of Javascript implementation of asynchronous image upload method example. For more information, please follow other related articles on the PHP Chinese website!