html5通过ajax上传文件并显示进度

通过ajax上传文件，需要用到一个html5新特性——FormData（兼容性：chrome，ff，IE9及以上）

FormData顾名思义，就是用于存放Form的数据信息的类，它是一个不透明的类，对外只暴露一个append方法，一般只在XMLRequest的send()函数里面作为传入参数使用。所以不要想着调试的时候可以看到FormData里面的信息，各种序列化函数也无法获取其内部信息。

整套上传文件的思路是：

构建一个FormData->把文件DOM对象塞到FormData里面->send出去。

前端html代码：

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

<div id='loading'></div>

<button id="upload">上传</button>

这里不需要有一个显示的form标签，因为你的数据完全由FormData对象构建，所以html代码只需要有个input用来获取文件就可以了。

原生js代码：

var fd=new FormData();

fd.append("thefile", document.getElementById('fileObj').files[0]);

var xmlhttp = window.XMLHttpRequest || window.ActiveXObject;

var xhr = new xmlhttp();

if (xhr.upload) { //显示上传进度

xhr.upload.addEventListener("progress", function(e) {

document.getElementById('loading').innerHTML=e.loaded/e.total*100; //这里的e.loaded代表已经上传的字节数，e.total代表总共需要上传的字节数

}, false);

}

xhr.open('POST', 这里是你的url , true);

xhr.send(fd);

注意：这里加入：xhr.setRequestHeader("Content-Type" , "multipart/form-data" );的话，在chrome和ff中会无法发送数据。

由于这个部分使用jquery来写还有些小问题，所以这里再附上一个jquery的代码：

var fd = new FormData();

var file = $('#thefile')[0].files[0];

fd.append("thefile", file);

$.ajax({

url: "你的url",

type: 'POST',

data: fd,

processData: false,//用来回避jquery对formdata的默认序列化，XMLHttpRequest会对其进行正确处理

contentType: false,//设为false才会获得正确的conten-Type

xhr: function() { //用以显示上传进度

var xhr = $.ajaxSettings.xhr();

if (xhr.upload) {

xhr.upload.addEventListener('progress', function(e) {

$('#loading').text(e.loaded/e.total*100);

}, false);

}

return xhr;

},

async: true

}).then(function(data) {

if (data.IsSuccessful == false) {

alert('上传失败');

} else {

alert('上传成功');

}

})

jquery从1.5开始就不对外暴露xhr了，因此我们需要在进行ajax请求的时候自己传入一个构造好了xhr来获取上传进度。