基于HTML5 Ajax实现文件上传并显示进度条
这篇文章主要介绍了基于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实现带进度条的文件上传全部内容，希望对大家的学习有所帮助。
标签：