基于HTML5 Ajax实现文件上传并显示进度条
内容摘要
本文实例讲解了ajax上传文件及进度条的实现方法,分享给大家供大家参考,具体内容如下
效果图:
html5上传是同步上传的方式,所以能够实现进度条的显示。
1.上传文件:
首先我们
效果图:
html5上传是同步上传的方式,所以能够实现进度条的显示。
1.上传文件:
首先我们
文章正文
本文实例讲解了ajax上传文件及进度条的实现方法,分享给大家供大家参考,具体内容如下
效果图:
html5上传是同步上传的方式,所以能够实现进度条的显示。
1.上传文件:
首先我们用ajax来取得<input type="file" id="file_upload">的file对象:
1 2 3 4 5 6 7 | var file = null; var input = $( "#file_upload" ); //文件域选择文件时, 执行readFile函数 input.addEventListener( 'change' ,readFile,false); function readFile(){ file = this.files[0]; } |
然后用FormData()送到后台。
1 2 | var fd = new FormData(); fd.append( "file" , file); |
2.监听事件:给XMLHttpRequest添加上传中的监听事件,可以得到已上传的文件大小,用以实现进度条的显示。
1 2 | //监听事件 hr.upload.addEventListener( "progress" , uploadProgress, false); |
完整代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <html> <head> <meta charset= "utf-8" > <title>进度条测试</title> <script type= "text/javascript" src= "../js/jquery-1.11.1.min.js" ></script> </head> <body> <input type= "file" id= "file_upload" /> <input type= "button" value= "上传" id= "upload" /> <div style= "background:#848484;width:100px;height:10px;margin-top:5px" > <div id= "progressNumber" style= "background:#428bca;width:0px;height:10px" > </div> </div> <font id= "percent" >0%</font> </body> <script> var file = null; $( function (){ $( "#upload" ).click( function (){ upload(); }); }); var input = document.getElementById( "file_upload" ); //文件域选择文件时, 执行readFile函数 input.addEventListener( 'change' ,readFile,false); function readFile(){ file = this.files[0]; } //上传文件 function upload(){ var xhr = new XMLHttpRequest(); var fd = new FormData(); fd.append( "fileName" , file); //监听事件 xhr.upload.addEventListener( "progress" , uploadProgress, false); //发送文件和表单自定义参数 xhr.open( "POST" , "../UploadServlet" ,true); xhr.send(fd); } function uploadProgress(evt){ if (evt.lengthComputable) { //evt.loaded:文件上传的大小 evt.total:文件总的大小 var percentComplete = Math. round ((evt.loaded) * 100 / evt.total); //加载进度条,同时显示信息 $( "#percent" ).html(percentComplete + '%' ) $( "#progressNumber" ).css( "width" , "" +percentComplete+ "px" ); } } </script> </html> |
以上就是关于ajax实现带进度条的文件上传全部内容,希望对大家的学习有所帮助。
代码注释