利用XMLHttpRequest level 2 实现文件异步上传

function upload(){

//1、准备FormData
var fd = new FormData();
fd.append("myfile",$('#myfileId')[0].files[0]);

//创建xhr对象
var xhr = new XMLHttpRequest();

//监听状态，实时响应
//xhr和xhr.upload 都有progress事件，xhr.progress是下载进度，xhr.upload.progress是上传进度
xhr.upload.onprogress = function(event){
if(event.lengthComputable){
var percent = Math.round(event.loaded * 100 / event.total);
console.log('%d%',percent);
$('#jindu').text(percent);
}
}

//传输开始事件
xhr.onloadstart = function(event){
console.log('load start');
$('#shangchuan').text('开始上传');
$('#stopBtn').one('click',function(){
xhr.abort();
$(this).hide();
})
loading(true);
}

//ajax过程成功完成事件
xhr.onload = function(event){
console.log('load success');
$('#shangchuan').text('上传成功');
console.log(xht.responseText);
var ret = JSON.parse(xhr.responseText);
console.log(ret.fname);
}

//ajax过程发生错误事件
xhr.onerror = function(event){
console.log('error');
$('#shangchuan').text('发生错误');
}

//ajax被取消
xhr.onabort = function(event){
console.log('abort');
}

//发起ajax请求传送数据
xhr.open('POST','/uploadFile',true);
xhr.send(fd);
}