在上篇文章給大家介紹了這篇文章里面的后臺(tái)Servlet。所以這里只看前臺(tái)的JS代碼。
首先HTML5用AJAX提交數(shù)據(jù)先要學(xué)習(xí)一個(gè)HTML5新增加的對(duì)象：FormData
FormData 對(duì)象可以使用append 方法進(jìn)行 key - value的數(shù)據(jù)添加，與以前我們常用的json不同的就是可以異步上傳二進(jìn)制文件。
1、FormDate對(duì)象的創(chuàng)建
var formData = new FormData();
2、向 FormDate 對(duì)象添加數(shù)據(jù)
formData.append("catname", "我是一只喵");
formData.append("age", 1); // 數(shù)字類(lèi)型會(huì)轉(zhuǎn)為字符串類(lèi)型
// 可以增加上傳的二進(jìn)制文件，比如fileInputElement對(duì)象中已經(jīng)包含了用戶所選擇的文件
formData.append("userfile", fileInputElement.files[0]);
//也可以將一個(gè) Blob 對(duì)象添加到 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 對(duì)象
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload");
xhr.send(formData);
HTML部分
FormData 對(duì)象簡(jiǎn)單的介紹完畢后，我們來(lái)看看頁(yè)面的HTML代碼是怎么寫(xiě)的
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是用來(lái)顯示進(jìn)度條的，所以需要對(duì)應(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部分
重頭戲來(lái)了，在頁(yè)面上加載上jquery后我們來(lái)看 JavaScript 是怎么寫(xiě)的，首先是 file 組件的 onchange事件方法：
function showPic(){
var pic = $("#pic").get(0).files[0];
$("img").prop("src" , window.URL.createObjectURL(pic) );
}
showPic的第一行是從 file 對(duì)象得到上傳文件 。 第二行則為 img 設(shè)置了src屬性。 可以在頁(yè)面中得到即時(shí)預(yù)覽的效果。
在看 uploadFile 方法之前，再讓我們簡(jiǎn)單學(xué)習(xí)一下進(jìn)度事件 （Progress Events ）的progress 吧 ......
Progress Events規(guī)范是W3C的一個(gè)工作草案，定義了與客戶端服務(wù)器通信有關(guān)的事件。這些事件最早其實(shí)值針對(duì)XHR操作，但目前也被其它API借鑒。有以下6個(gè)進(jìn)度事件。
loadstart：在接收到相應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)。
progress：在接收相應(yīng)期間持續(xù)不斷觸發(fā)?！ ?/我們就只看著一個(gè)好了
error：在請(qǐng)求發(fā)生錯(cuò)誤時(shí)觸發(fā)。
abort：在因?yàn)檎{(diào)用abort()方法而終止鏈接時(shí)觸發(fā)。
load：在接收到完整的相應(yīng)數(shù)據(jù)時(shí)觸發(fā)。
loadend：在通信完成或者觸發(fā)error、abort或load事件后觸發(fā)。
progress事件是Mozilla提交的，這個(gè)事件會(huì)在瀏覽器接收新數(shù)據(jù)期間周期性地觸發(fā)。而onprogress事件處理程序會(huì)接收到一個(gè)event對(duì)象，其target屬性是XHR對(duì)象，但包含著三個(gè)額外的屬性：
lengthComputable ：表示進(jìn)度信息是否可用的布爾值
position?。罕硎疽呀?jīng)接收的字節(jié)數(shù)
totalSize ：表示根據(jù)Content-Length相應(yīng)頭部確定的預(yù)期字節(jié)數(shù)。
有了這些信息，我們就可以為用戶創(chuàng)建一個(gè)進(jìn)度指示器了。但是 問(wèn)題又來(lái)了， jQuery的 ajax 方法沒(méi)有關(guān)于 progress 事件的操作。這怎么玩~~
好在通過(guò)查閱資料發(fā)現(xiàn)，jQuery的ajax方法調(diào)用的XMLHttpRequest對(duì)象是可以指定的！??！
看 8453行，就是它了。于是 uploadFile 方法的ajax部分的時(shí)候代碼就變成了這個(gè)樣式。
最重要的部分代碼：
function uploadFile(){
// 獲取上傳文件，放到 formData對(duì)象里面
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 對(duì)象
processData : false,
//必須false才會(huì)自動(dòng)加上正確的Content-Type
contentType : false ,
//這里我們先拿到j(luò)Query產(chǎn)生的 XMLHttpRequest對(duì)象，為其增加 progress 事件綁定，然后再返回交給ajax使用
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});
}
最后加上 onprogress 方法，為整個(gè)功能花上個(gè)句號(hào)。
/**
* 偵查附件上傳情況 ,這個(gè)方法大概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 +"%");
}
最后附上整個(gè)頁(yè)面的代碼，方便對(duì)比。
!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才會(huì)避開(kāi)jQuery對(duì) formdata 的默認(rèn)處理
* XMLHttpRequest會(huì)對(duì) formdata 進(jìn)行正確的處理
*/
$.ajax({
type: "POST",
url: "upload",
data: formData ,
processData : false,
//必須false才會(huì)自動(dòng)加上正確的Content-Type
contentType : false ,
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});
}
/**
* 偵查附件上傳情況 ,這個(gè)方法大概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 簡(jiǎn)單的進(jìn)度條實(shí)現(xiàn)代碼
- 6款新穎的jQuery和CSS3進(jìn)度條插件推薦
- 分享8款優(yōu)秀的 jQuery 加載動(dòng)畫(huà)和進(jìn)度條插件
- jquery實(shí)現(xiàn)的一個(gè)簡(jiǎn)單進(jìn)度條效果實(shí)例
- Javascript jquery css 寫(xiě)的簡(jiǎn)單進(jìn)度條控件
- jQuery EasyUI API 中文文檔 - ProgressBar 進(jìn)度條
- jQuery實(shí)現(xiàn)文件上傳進(jìn)度條特效
- jQuery監(jiān)聽(tīng)文件上傳實(shí)現(xiàn)進(jìn)度條效果的方法
- 利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件
- jquery實(shí)現(xiàn)百分比記分進(jìn)度條
