异步上传文件

异步上传文件

• 关于文件上传，之前接触不多。现在有需求，看教程简单些一个。再去测试能否使用。

• HTML的新属性，上传文件使用formData对象，所以要新建这个对象，然后将file chang后的文件信息添加到对象中。使用ajax请求上传。

  var formData=new FormData();
  var upLoadInp=document.getElementById("upLoad");
  var maxSize=10;
  upLoadInp.onchange=function(){
      var fileData=upLoadInp.files[0];
      var fileSize=upLoadInp.files[0].size;
      if( fileSize > maxSize * 1024 *1024 ){
          alert("文件大小不能大于10兆");
          return;
      }
      formData.append("file",fileData);
      //创建异步对象
      function XHR(){
          if(window.XHMHttpRequest){
              return new XHMHttpRequest();
          }else if(window.ActiveObjectX) {
              return new ActiveObjectX();
          }
      }
      var xhr=XHR();
      xhr.open("POST",url);
      xhr.send(formData);
      xhr.onreadystatechange=function(){
          if(xhr.status==200 && xhr.readyState==4) {
              var data=xhr.responseText;
              console.log(data);
          }else {
              alert("上传失败，重新上传");
          }
          //创建进度条
          var pro=document.createElement("div");
          pro.setAttribute("id","progress);
          pro.......(设置属性)；
          xhr.onprogress=function(event){
              var load=event.loaded;
              var total=event.total;(字节数);
              var currentPro=Math.Ceil(load/total * 1024 *1024 );(兆)
              pro.innerHTML=currentPro/(1024*1024) *100 + "%";
              pro.style.width=load/total* 100 *2 + "px";
          }
      }
  }
  //大概步骤思路是这样，可以在上传前判断文件的大小，来限制文件大小。