HTML5结合ajax实现文件上传以及进度显示

html代码：

<input type="file" name="file" id="abc" class="aaa" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">

js代码：
function showPreview(source) {
var file = source.files[0];
console.log(file);
if(window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {

document.getElementById("portrait").src = e.target.result;
};
fr.readAsDataURL(file);

}

var myForm = new FormData();

myForm.append("name", "张三");
//myForm.append("userfile", document.getElementById('abc').files[0]);这样也可以
myForm.append("file", file);

$.ajax({
type:'POST',
processData:false,
contentType:false,
url:'get.php',
xhr: xhr_provider,
data:myForm
});
}

function on_progress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
};
var xhr_provider = function() {
var xhr = jQuery.ajaxSettings.xhr();
if(on_progress && xhr.upload) {
xhr.upload.addEventListener('progress', on_progress, false);
}
return xhr;
};

参考链接：

http://www.hello-code.com/blog/html5/201403/2913.html

http://www.cnblogs.com/idche/archive/2011/05/16/2047758.html

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData#append()

http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html

http://www.matlus.com/html5-file-upload-with-progress/

http://www.cnblogs.com/wintersun/archive/2012/08/30/2663408.html

http://david6116.blog.163.com/blog/static/13385556320125481143139/

http://blog.csdn.net/dazhi_100/article/details/20068383

http://keshion.iteye.com/blog/1171445

http://blog.csdn.net/yaoyuan_difang/article/details/38582697