当前位置：Gxlcms > AJAX > 基于HTML5 Ajax文件上传进度条如何实现（jquery版本）

基于HTML5 Ajax文件上传进度条如何实现（jquery版本）

时间：2021-07-01 10:21:17 帮助过：34人阅读

在上篇文章给大家介绍了这篇文章里面的后台Servlet。所以这里只看前台的JS代码。

首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象：FormData

FormData 对象可以使用append 方法进行 key - value的数据添加，与以前我们常用的json不同的就是可以异步上传二进制文件。

1、FormDate对象的创建

  1. var formData = new FormData();

2、向 FormDate 对象添加数据

  1. formData.append("catname", "我是一只喵");
  2. formData.append("age", 1); 　　　　　　　　// 数字类型会转为字符串类型
  3. // 可以增加上传的二进制文件，比如fileInputElement对象中已经包含了用户所选择的文件
  4. formData.append("userfile", fileInputElement.files[0]);
  5. //也可以将一个 Blob 对象添加到 formData 中
  6. var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; 
  7. var oBlob = new Blob([oFileBody], { type: "text/xml"});
  8. formData.append("webmasterfile", oBlob);

3、使用 FormData 对象

  1. var xhr = new XMLHttpRequest();
  2. xhr.open("POST", "upload");
  3. xhr.send(formData);

HTML部分

FormData 对象简单的介绍完毕后，我们来看看页面的HTML代码是怎么写的

  1. <img width="400" height="250"/><br /> 
  2. <input type="file" id="pic" name="pic" onchange="showPic()"/>
  3. <input type="button" value="上传图片" onclick="uploadFile()" /><br /> 
  4. <div id="parent">
  5.  <div id="son"></div>
  6. </div>

最下面的div是用来显示进度条的，所以需要对应的css样式。样式如下，颜色不好看，自己改吧：

  1. <style type="text/css"> 
  2.  #parent{width:550px; height:10px; border:2px solid #09F;} 
  3.  #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} 
  4. </style>

JS部分

重头戏来了，在页面上加载上jquery后我们来看 JavaScript 是怎么写的，首先是 file 组件的 onchange事件方法：

  1. function showPic(){
  2.  var pic = $("#pic").get(0).files[0];
  3.  $("img").prop("src" , window.URL.createObjectURL(pic) );
  4. }

showPic的第一行是从 file 对象得到上传文件 。 第二行则为 img 设置了src属性。 可以在页面中得到即时预览的效果。

在看 uploadFile 方法之前，再让我们简单学习一下进度事件 （Progress Events ）的progress 吧 ...... 

Progress Events规范是W3C的一个工作草案，定义了与客户端服务器通信有关的事件。这些事件最早其实值针对XHR操作，但目前也被其它API借鉴。有以下6个进度事件。

loadstart：在接收到相应数据的第一个字节时触发。
progress：在接收相应期间持续不断触发。　　//我们就只看着一个好了
error：在请求发生错误时触发。
abort：在因为调用abort()方法而终止链接时触发。
load：在接收到完整的相应数据时触发。
loadend：在通信完成或者触发error、abort或load事件后触发。

progress事件是Mozilla提交的，这个事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：

lengthComputable ：表示进度信息是否可用的布尔值

position　：表示已经接收的字节数

totalSize ：表示根据Content-Length相应头部确定的预期字节数。

有了这些信息，我们就可以为用户创建一个进度指示器了。但是 问题又来了， jQuery的 ajax 方法没有关于 progress 事件的操作。这怎么玩~~

好在通过查阅资料发现，jQuery的ajax方法调用的XMLHttpRequest对象是可以指定的！！！

看 8453行，就是它了。于是 uploadFile 方法的ajax部分的时候代码就变成了这个样式。

最重要的部分代码：

  1. function uploadFile(){
  2. 　　
  3. 　　// 获取上传文件，放到 formData对象里面
  4. 　　var pic = $("#myhead").get(0).files[0];
  5. 　　var formData = new FormData();
  6.  formData.append("file" , pic);
  7. 　　$.ajax({
  8. 　　　　type: "POST",
  9. 　　　　url: "upload",
  10. 　　　　data: formData ,　　//这里上传的数据使用了formData 对象
  11. 　　　　processData : false, 
  12. 　　　　//必须false才会自动加上正确的Content-Type 
  13. 　　　　contentType : false , 
  14. 　　　　
  15. 　　　　//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
  16. 　　　　xhr: function(){
  17. 　　　　　　var xhr = $.ajaxSettings.xhr();
  18. 　　　　　　if(onprogress && xhr.upload) {
  19. 　　　　　　　　xhr.upload.addEventListener("progress" , onprogress, false);
  20. 　　　　　　　　return xhr;
  21. 　　　　　　}
  22. 　　　　} 
  23. 　　});
  24. }

最后加上 onprogress 方法，为整个功能花上个句号。

  1. /**
  2.  * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
  3.  */
  4. function onprogress(evt){
  5. 　　var loaded = evt.loaded;     //已经上传大小情况 
  6.  var tot = evt.total;      //附件总大小 
  7.  var per = Math.floor(100*loaded/tot);  //已经上传的百分比 
  8. 　　$("#son").html( per +"%" );
  9.  $("#son").css("width" , per +"%");
  10. }

最后附上整个页面的代码，方便对比。

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.  <title>html5_2.html</title>
  5.  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.  <style type="text/css"> 
  7.   #parent{width:550px; height:10px; border:2px solid #09F;} 
  8.   #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} 
  9.  </style>
  10.  <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
  11.  <script type="text/javascript">
  12.  function showPic(){
  13.   var pic = $("#pic").get(0).files[0];
  14.   $("img").prop("src" , window.URL.createObjectURL(pic) );
  15.   uploadFile();
  16.  }
  17.  function uploadFile(){
  18.   var pic = $("#pic").get(0).files[0];
  19.   var formData = new FormData();
  20.   formData.append("file" , pic);
  21.   /** 
  22.    * 必须false才会避开jQuery对 formdata 的默认处理 
  23.    * XMLHttpRequest会对 formdata 进行正确的处理 
  24.    */ 
  25.   $.ajax({
  26.    type: "POST",
  27.    url: "upload",
  28.    data: formData ,
  29.    processData : false, 
  30.    //必须false才会自动加上正确的Content-Type 
  31.    contentType : false , 
  32.    xhr: function(){
  33.     var xhr = $.ajaxSettings.xhr();
  34.     if(onprogress && xhr.upload) {
  35.      xhr.upload.addEventListener("progress" , onprogress, false);
  36.      return xhr;
  37.     }
  38.    } 
  39.   });
  40.  }
  41.  /**
  42.   * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
  43.   */
  44.  function onprogress(evt){
  45.   var loaded = evt.loaded;     //已经上传大小情况 
  46.   var tot = evt.total;      //附件总大小 
  47.   var per = Math.floor(100*loaded/tot);  //已经上传的百分比 
  48.   $("#son").html( per +"%" );
  49.   $("#son").css("width" , per +"%");
  50.  }
  51.  </script>
  52.  </head>
  53.  <body>
  54.  <img width="400" height="250"/><br /> 
  55.  <input type="file" id="pic" name="pic" onchange="showPic()"/>
  56.  <input type="button" value="上传图片" onclick="uploadFile()" /><br /> 
  57.  <div id="parent">
  58.   <div id="son"></div>
  59.  </div> 
  60.  </body>
  61. </html>

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！