五月天丁香花欧美在线,在线综合无码精品

主頁 > 知識庫 > 基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)（jquery版本）

基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)（jquery版本）

在上篇文章給大家介紹了這篇文章里面的后臺Servlet。所以這里只看前臺的JS代碼。

首先HTML5用AJAX提交數(shù)據(jù)先要學(xué)習(xí)一個HTML5新增加的對象：FormData

FormData 對象可以使用append 方法進(jìn)行 key - value的數(shù)據(jù)添加，與以前我們常用的json不同的就是可以異步上傳二進(jìn)制文件。

1、FormDate對象的創(chuàng)建

var formData = new FormData();

2、向 FormDate 對象添加數(shù)據(jù)

formData.append("catname", "我是一只喵");
formData.append("age", 1); 　　　　　　　　// 數(shù)字類型會轉(zhuǎn)為字符串類型
// 可以增加上傳的二進(jìn)制文件，比如fileInputElement對象中已經(jīng)包含了用戶所選擇的文件
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是用來顯示進(jìn)度條的，所以需要對應(yīng)的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 設(shè)置了src屬性。可以在頁面中得到即時預(yù)覽的效果。

在看 uploadFile 方法之前，再讓我們簡單學(xué)習(xí)一下進(jìn)度事件（Progress Events ）的progress 吧 ......

Progress Events規(guī)范是W3C的一個工作草案，定義了與客戶端服務(wù)器通信有關(guān)的事件。這些事件最早其實(shí)值針對XHR操作，但目前也被其它API借鑒。有以下6個進(jìn)度事件。

loadstart：在接收到相應(yīng)數(shù)據(jù)的第一個字節(jié)時觸發(fā)。
progress：在接收相應(yīng)期間持續(xù)不斷觸發(fā)。　　//我們就只看著一個好了
error：在請求發(fā)生錯誤時觸發(fā)。
abort：在因?yàn)檎{(diào)用abort()方法而終止鏈接時觸發(fā)。
load：在接收到完整的相應(yīng)數(shù)據(jù)時觸發(fā)。
loadend：在通信完成或者觸發(fā)error、abort或load事件后觸發(fā)。

progress事件是Mozilla提交的，這個事件會在瀏覽器接收新數(shù)據(jù)期間周期性地觸發(fā)。而onprogress事件處理程序會接收到一個event對象，其target屬性是XHR對象，但包含著三個額外的屬性：

lengthComputable ：表示進(jìn)度信息是否可用的布爾值

position?。罕硎疽呀?jīng)接收的字節(jié)數(shù)

totalSize ：表示根據(jù)Content-Length相應(yīng)頭部確定的預(yù)期字節(jié)數(shù)。

有了這些信息，我們就可以為用戶創(chuàng)建一個進(jìn)度指示器了。但是問題又來了， jQuery的 ajax 方法沒有關(guān)于 progress 事件的操作。這怎么玩~~

好在通過查閱資料發(fā)現(xiàn)，jQuery的ajax方法調(diào)用的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 ,　　//這里上傳的數(shù)據(jù)使用了formData 對象
　　　　processData : false, 
　　　　//必須false才會自動加上正確的Content-Type 
　　　　contentType : false , 
　　　　
　　　　//這里我們先拿到j(luò)Query產(chǎn)生的 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秒執(zhí)行一次
 */
function onprogress(evt){
　　var loaded = evt.loaded;     //已經(jīng)上傳大小情況 
 var tot = evt.total;      //附件總大小 
 var per = Math.floor(100*loaded/tot);  //已經(jīng)上傳的百分比 
　　$("#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 的默認(rèn)處理 
   * XMLHttpRequest會對 formdata 進(jìn)行正確的處理 
   */ 
  $.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秒執(zhí)行一次
  */
 function onprogress(evt){
  var loaded = evt.loaded;     //已經(jīng)上傳大小情況 
  var tot = evt.total;      //附件總大小 
  var per = Math.floor(100*loaded/tot);  //已經(jīng)上傳的百分比 
  $("#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>

您可能感興趣的文章:

jquery 簡單的進(jìn)度條實(shí)現(xiàn)代碼
6款新穎的jQuery和CSS3進(jìn)度條插件推薦
分享8款優(yōu)秀的 jQuery 加載動畫和進(jìn)度條插件
jquery實(shí)現(xiàn)的一個簡單進(jìn)度條效果實(shí)例
Javascript jquery css 寫的簡單進(jìn)度條控件
jQuery EasyUI API 中文文檔 - ProgressBar 進(jìn)度條
jQuery實(shí)現(xiàn)文件上傳進(jìn)度條特效
jQuery監(jiān)聽文件上傳實(shí)現(xiàn)進(jìn)度條效果的方法
利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計時插件
jquery實(shí)現(xiàn)百分比記分進(jìn)度條

標(biāo)簽：內(nèi)蒙古洛陽邢臺鄭州舟山林芝遼源海南

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)（jquery版本）》，本文關(guān)鍵詞基于,HTML5,Ajax,文件,上傳,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。