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

港控/mmm° 2022-07-12 13:18 192阅读 0赞

本文实例讲解了ajax上传文件及进度条的实现方法，分享给大家供大家参考，具体内容如下

效果图：

![1422392355-0.jpg_2016125165746][]

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 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实现带进度条的文件上传全部内容，希望对大家的学习有所帮助。

原文链接:点击打开链接

[1422392355-0.jpg_2016125165746]: /images/20220710/c2d1138b575848188c43be2f6cbc4420.png