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

首先HTML5用AJAX提交數(shù)據(jù)先要學(xué)習(xí)一個(gè)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]);//也可以將一個(gè) 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屬性。 可以在頁面中得到即時(shí)預(yù)覽的效果。

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

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

loadstart：在接收到相應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)。
progress：在接收相應(yīng)期間持續(xù)不斷觸發(fā)。　　//我們就只看著一個(gè)好了
error：在請求發(fā)生錯(cuò)誤時(shí)觸發(fā)。