之前在博文：原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传（当然还有跨域，但不是本文的重点）。
那么具体怎么样实现ajax上传文件呢？
一般来说，浏览器获取文件的方法有拖拽和input_file两种：
// 先定义一个放文件的数组var files = [];//拖拽事件获取文件div.addEventListener(‘drop‘,function(ev){ ???//因为dataTransfer.files只是类数组，所以要用Array.from转换一下 ???files = files.concat(Array.from(ev.dataTransfer.files));},false)// 从input_file获取files,假设有n个name为f1的input_file元素let input_files = Array.from(document.getElementsByName(‘f1‘));uploadBtn.onclick = function(){ ???input_files.forEach(input=>{ ????????files = files.concat(Array.from(input.files)); ???}) ???let formData = new FormData(); ???files.forEach(file=>{ ???????formData.append(‘name~~‘,file); ???}) ???let xhr = new XMLHttpRequest(); ???xhr.upload.onprogress = function(ev){ ???????console.log(‘进度：‘+(100*ev.loaded/ev.total).toFixed(2)+‘%‘); ???} ???xhr.open(‘POST‘,‘url~~‘,true); ???xhr.send(formData); ???xhr.onreadystatechange = function(){ ??????if(this.readyState == 4){ ??????????if(this.status==200){ ?????????????alert(‘上传成功~~‘)； ?????????????files = []; ??????????} ??????} ???}}ps：进度的显示那里，博主之前一直写错为xhr.onprogress,如果写成这样，那么进度过程就不会出现，直接让你等待，直到100%才显示
记住上传的时候无论是onprogress、onload还是onerror,都是xhr.upload对象下的事件才会生效，否则就会检测不了上传的过程,特别是xhr.upload.onprogress
ajax上传文件及进度显示
原文地址：http://www.cnblogs.com/amiezhang/p/7902808.html