【下载文档:  基于HTML5 Ajax实现文件上传并显示进度条.txt 】

---

基于HTML5 Ajax实现文件上传并显示进度条
本文实例讲解了ajax上传文件及进度条的实现方法，分享给大家供大家参考，具体内容如下
效果图：
html5上传是同步上传的方式，所以能够实现进度条的显示。
1.上传文件：
首先我们用ajax来取得的file对象：
var file = null;
var input = $("#file_upload");
//文件域选择文件时, 执行readFile函数
input.addEventListener('change',readFile,false);
function readFile(){
file = this.files[0];
}
然后用FormData()送到后台。
var fd = new FormData();
fd.append("file", file);
2.监听事件：给XMLHttpRequest添加上传中的监听事件，可以得到已上传的文件大小，用以实现进度条的显示。
//监听事件
hr.upload.addEventListener("progress", uploadProgress, false);
完整代码如下：










0%



以上就是关于ajax实现带进度条的文件上传全部内容，希望对大家的学习有所帮助。