jquery+HTML5+Ajax實作具有進度條的檔案上傳功能-js教程-PHP中文網

這次帶給大家jquery HTML5 Ajax實作帶有進度條的檔案上傳功能，jquery HTML5 Ajax實作有進度條檔上傳功能的注意事項有哪些，下面就是實戰案例，一起來看一下。

首先HTML5用AJAX提交資料先要學習一個HTML5新增加的物件：FormData

FormData 物件可以使用append 方法進行key - value的資料添加，與以前我們常用的json不同的就是可以異步上傳二進位。

1、FormDate物件的建立

var formData = new FormData();

登入後複製

#2、新增資料

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);

登入後複製

##1使用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 /> 
<p id="parent">
 <p id="son"></p>
</p>

登入後複製

最下面的p是用來顯示進度條的，所以需要對應的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物件是可以指定的！！！ ###############看 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 /> 
 <p id="parent">
  <p id="son"></p>
 </p> 
 </body>
</html>

登入後複製

###我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########Jquery LigerUI實作檔案上傳步驟詳解###############jquery動態載入js檔案詳解##### ###########jQuery怎麼讀取XML檔案內容#########

以上是jquery+HTML5+Ajax實作具有進度條的檔案上傳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！