??? --sunfruit
???很多時候需要上傳附件到服務器,一般采用在頁面放置<input type="file" name="upload" value=""> 的方式讓用戶選擇要上傳的文件進行上傳,使用的是HTTP協議,這樣的方式很方便開發也簡單,不過如果上傳的附件比較大的時候,會出現IE響應很慢的情況,如果用戶急性子,多點幾下上傳的按鈕,那么就會導致IE不響應的情況,這個時候如果在文件上傳得過程中,給用戶一個動態的提示甚至是一個上傳的進度條,效果就會好多了,這樣就會用到Ajax技術了,讓Ajax以一個固定的間隔時間檢查上傳情況然后在頁面以文字或是圖片的方式體現出來就行了。
???在使用Ajax進行附件上傳進度查詢的時候也想過,直接使用Ajax進行附件上傳,在實現過程中發現問題比較多,所以就使用了變通的方式:使用標準的附件上傳方式,結合Ajax進行上傳的進度檢查
???主要的代碼如下:
???Ajax的封裝
???/**
? * 創建 XMLHttpRequest 對象
? */
? function getXMLHttpRequest()
? {
??? var http_request;
??? if (window.XMLHttpRequest) {
????? //非IE瀏覽器框架創建 XMLHttpRequest 對象
????? http_request = new XMLHttpRequest();
????? if(http_request.overrideMimeType)
????? {
??????? http_request.overrideMimeType('text/xml');
????? }
??? }else if (window.ActiveXObject){
????? // 創建 XMLHttpRequest 對象
????? try {
??????? http_request = new ActiveXObject("Msxml2.XMLHTTP");
????? } catch (e1) {
??????? try {
????????? http_request = new ActiveXObject("Microsoft.XMLHTTP");
??????? } catch (e2) {
????????? // 不能創建 XMLHttpRequest 對象
??????? }
????? }
??? }
??? return http_request;
? }
/**
?? * Get請求
?? */
? function sendGetDictate(http_request,url)
? {
??? req.open("GET", url, true);
??? http_request.send(null);
? }
以上是Ajax的的基礎部分,下面說文件上傳部分的檢查部分,文件上傳本身的流程不變,只是在提交上傳以后,需要執行setTimeout(checkupload,500); 這樣的方法 checkupload 方法要自己編寫,例如
function checkupload()
? {
??? req=getXMLHttpRequest();
??? req.onreadystatechange = setActiveContent;
??? sendGetDictate(req,"/manager/servlet/imageservlet?tag=ajaxuploadfilecheck&WARE_ID=609187669&nocache="+Math.random(),"name=111");
? }
然后需要編寫setActiveContent方法,例如
var count=0; //防止無限循環,并且在頁面提交上傳得時候設置為0
function setActiveContent()
? {
??? if (req.readyState == 4) {
????? if (req.status == 200) {
??????? var rettext=req.responseText; //這里是servlet返回的內容,檢查上傳得狀態,可以在javabean或是servlet里面設置全局的靜態變量來表明上傳狀態
??????? if(rettext=="-1")
??????? {
????????? //停止循環
????????? alert("服務器更新錯誤");
??????? }
??????? else if(rettext=="0")
??????? {
????????? //繼續循環檢查
????????? if(count<6)
????????? {
??????????? setTimeout("checkupload()",500);
??????????? count++;
????????? }
????????? else
????????? {
??????????? alert("上傳失敗");
????????? }
??????? }
????????else if(rettext=="1")
??????? {
????????? alert("文件上傳成功");
??????? }
????? }
??? }
? }
?
基本流程就是這樣了,至于文字表現上傳過程還是進度條表現,就看自己了