笔记：ajax文件上传

ajax文件上传(原生js与jq的用法)

首先上传文件需要先选中一个文件，一个type为file的input输入框就可以了

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

然后用FormData对象包裹选中的文件

var input=document.getElementById("input");
var formData=new FormData();
formData.append("file",input.files[0]);

定义url以及方法

var url="http://localhost:1080/test",
method="POST";

js文件上传
封装一个用于发送ajax请求的方法

function ajax(url,method,data){
   var xhr=null;
   if(window.XMLHttpRequest){
      xhr=new XMLHttpRequest();
   }else if(window.ActiveXObject){
      try{
          xhr=new ActiveXObject("Msxm12.XMLHTTP");
      }catch(e){
         try{
              xhr=new ActiveXObject("Microsoft.XMLHTTP");
         }catch(e){
              alert("您的浏览器暂不支持Ajax!")
         }
      }
   }
   xhr.onerror=function(e){
       console.log(e);
   }
   xhr.open(method,url);
   try{
      setTimeout(function(){
         xhr.send(data)
      })
   }catch(e){
      console.log('error',e)
   }
   return xhr
}

上传文件并绑定事件

var xhr=ajax(url,method,formData);
xhr.upload.onprogress=function(e){
   console.log("upload progress:",e.load/e.total*100+"%");
}
xhr.upload.onload=function(){
   console.log("upload onload.");
}
xhr.onload=function(){
  console.log("onload.");
}

jquery 文件上传
jq提供了各种各样的上传插件，其原理都是利用jq自身ajax方法

$.ajax({
  type:method,
  url:url,
  data:formData,
  processData:false,
  contentType:false,//必须是false才会自动的加上Content-Type
  xhr:function(){
      var xhr=$ajaxSettings.xhr();//实际上就是 return new window.XMLHttpRequest()对象；
      if(xhr.upload) {
      xhr.upload.addEventListener("progress", function(e){
        console.log("jq upload progress:", e.loaded/e.total*100 + "%");
      }, false);
      xhr.upload.addEventListener("load", function(){
        console.log("jq upload onload.");
      });
      xhr.addEventListener("load", function(){
        console.log("jq onload.");
      });
      return xhr;
    }
  }
})