介绍 var file =,零,,
var input =, (“# file_upload");美元,//文件域选择文件时,,执行readFile函数,
input.addEventListener(& # 39;改变# 39;,readFile, false),,
function readFile () {,=,,file this.files [0];,
} , var fd =, new FormData (),,
fd.append (“file",,文件), ,//监听事件,
hr.upload.addEventListener (“progress", uploadProgress,,假), & lt; html>,
& lt; head>,
& lt; meta charset=皍tf-8"祝辞,
& lt; title>进度条测试& lt;/title>,
& lt; script 类型=拔谋?javascript" https://www.yisu.com/zixun/, src=" . ./js/jquery-1.11.1.min.js ">
头
<身体>
<字体id=" % "> 0%
<>脚本
var文件=零;
$(函数(){
$(" #上传").click(函数(){
上传();
})；
})；
var输入=. getelementbyid (“file_upload”);//文件域选择文件时,执行readFile函数
input.addEventListener(‘改变’,readFile假);
readFile函数(){
文件=this.files [0];
}//上传文件
函数上传(){
var xhr=new XMLHttpRequest ();
var fd=new FormData ();
fd。追加(“文件名”,文件);//监听事件
xhr.upload。addEventListener(“进步”,uploadProgress假);//发送文件和表单自定义参数
xhr。打开(“后”,“. ./UploadServlet”,真的);
xhr.send (fd);
}
函数uploadProgress (evt) {
如果(evt.lengthComputable) {//evt。加载:文件上传的大小evt.total:文件总的大小
var percentComplete=Math.round ((evt.loaded) * 100/evt.total);//加载进度条,同时显示信息
$ (" # % ")。html (percentComplete + ' % ')
$ (" # progressNumber ") . css(“宽度”,“”+ percentComplete +“px”);
}
}>
这篇文章主要介绍HTML5中Ajax如何实现文件上传并显示进度条,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体内容如下
效果图:
HTML5上传是同步上传的方式,所以能够实现进度条的显示。
<强> 1。上传文件:
首先我们用Ajax来取得& lt;输入类型=癴ile"id=癴ile_upload"祝辞的文件对象:
,然后用FormData()送到后台。
<强>,2。监听事件:给XMLHttpRequest添加上传中的监听事件,可以得到已上传的文件大小,用以实现进度条的显示。
完整代码如下:
什么是ajax
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。
以上是“HTML5中ajax如何实现文件上传并显示进度条”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
