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

程序员文章站 2023-10-31 14:41:58

在上篇文章给大家介绍了这篇文章里面的后台servlet。所以这里只看前台的js代码。首先html5用ajax提交数据先要学习一个html5新增加的对象：formdata...

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

首先html5用ajax提交数据先要学习一个html5新增加的对象：formdata

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

1、formdate对象的创建

var formdata = new formdata();

2、向 formdate 对象添加数据

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

3、使用 formdata 对象

var xhr = new xmlhttprequest();
xhr.open("post", "upload");
xhr.send(formdata);

html部分

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

<img width="400" height="250"/><br /> 
<input type="file" id="pic" name="pic" onchange="showpic()"/>
<input type="button" value="上传图片" onclick="uploadfile()" /><br /> 
<div id="parent">
 <div id="son"></div>
</div>

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

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

js部分

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

function showpic(){
 var pic = $("#pic").get(0).files[0];
 $("img").prop("src" , window.url.createobjecturl(pic) );
}

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对象是可以指定的！！！

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

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

最重要的部分代码：

function uploadfile(){
　　
　　// 获取上传文件，放到 formdata对象里面
　　var pic = $("#myhead").get(0).files[0];
　　var formdata = new formdata();
 formdata.append("file" , pic);
　　$.ajax({
　　　　type: "post",
　　　　url: "upload",
　　　　data: formdata ,　　//这里上传的数据使用了formdata 对象
　　　　processdata : false, 
　　　　//必须false才会自动加上正确的content-type 
　　　　contenttype : false , 
　　　　
　　　　//这里我们先拿到jquery产生的 xmlhttprequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
　　　　xhr: function(){
　　　　　　var xhr = $.ajaxsettings.xhr();
　　　　　　if(onprogress && xhr.upload) {
　　　　　　　　xhr.upload.addeventlistener("progress" , onprogress, false);
　　　　　　　　return xhr;
　　　　　　}
　　　　} 
　　});
}

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

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

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

<!doctype html>
<html>
 <head>
 <title>html5_2.html</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <style type="text/css"> 
  #parent{width:550px; height:10px; border:2px solid #09f;} 
  #son {width:0; height:100%; background-color:#09f; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} 
 </style>
 <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
 <script type="text/javascript">
 function showpic(){
  var pic = $("#pic").get(0).files[0];
  $("img").prop("src" , window.url.createobjecturl(pic) );
  uploadfile();
 }
 function uploadfile(){
  var pic = $("#pic").get(0).files[0];
  var formdata = new formdata();
  formdata.append("file" , pic);
  /** 
   * 必须false才会避开jquery对 formdata 的默认处理 
   * xmlhttprequest会对 formdata 进行正确的处理 
   */ 
  $.ajax({
   type: "post",
   url: "upload",
   data: formdata ,
   processdata : false, 
   //必须false才会自动加上正确的content-type 
   contenttype : false , 
   xhr: function(){
    var xhr = $.ajaxsettings.xhr();
    if(onprogress && xhr.upload) {
     xhr.upload.addeventlistener("progress" , onprogress, false);
     return xhr;
    }
   } 
  });
 }
 /**
  * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
  */
 function onprogress(evt){
  var loaded = evt.loaded;     //已经上传大小情况 
  var tot = evt.total;      //附件总大小 
  var per = math.floor(100*loaded/tot);  //已经上传的百分比 
  $("#son").html( per +"%" );
  $("#son").css("width" , per +"%");
 }
 </script>
 </head>
 <body>
 <img width="400" height="250"/><br /> 
 <input type="file" id="pic" name="pic" onchange="showpic()"/>
 <input type="button" value="上传图片" onclick="uploadfile()" /><br /> 
 <div id="parent">
  <div id="son"></div>
 </div> 
 </body>
</html>

上一篇： PHP数组去重比较快的实现方式

下一篇：给PHP开发者的编程指南第一部分降低复杂程度

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

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

MVC中基于Ajax和HTML5实现文件上传功能

基于Ajax技术实现文件上传带进度条

基于jquery ajax的多文件上传进度条过程解析

jquery+HTML5+Ajax实现带有进度条的文件上传功能

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

MVC中基于Ajax和HTML5实现文件上传功能

javascript - ajax结合html5中的file实现文件上传，后台用PHP接收，该如何用PHP接收传过来的formData?

HTML5 Ajax文件上传进度条如何显示

基于Ajax技术实现文件上传带进度条