基于HTML5 Ajax实现文件上传并显示进度条

2020-03-24 16:03:57

字体：大中小

来源：转载

供稿：网友

本文实例讲解了ajax上传文件及进度条的实现方法，分享给大家供大家参考，具体内容如下效果图：html5上传是同步上传的方式，所以能够实现进度条的显示。
1.上传文件：
首先我们用ajax来取得 input type="file" id="file_upload" 的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); 完整代码如下：
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 div id="progressNumber" /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实现带进度条的文件上传全部内容，希望对大家的学习有所帮助。更多编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：基于HTML5 WebGL实现的3D机房

下一篇：如何使用HTML5 canvas绘制一个矩形