原本打算使用jquery插件進行異步文件上傳，比如uploadfy但是需要額外的支持，也有人用iframe模仿異步上傳機制，感覺都比較別扭。因為項目不考慮低版本瀏覽器，所以決定用html5實現(xiàn)。下面只是一個簡單的demo，具體樣式需要自己去做。
后臺基于strut2進行文件處理，具體因項目而定。只是要注意設(shè)置文件大小的限制。 constant name= struts.multipart.maxSize value= 52428800 / 這個配置根據(jù)具體情況設(shè)定，超過此值會報404.
首先是上傳頁面,比較簡單，附帶了文件上者這個參數(shù)。

upload.jsp

 %@page language= java pageEncoding= UTF-8 contentType= text/html; charset=UTF-8 % String path = request.getContextPath();  !DOCTYPE html  html  head  title 使用XMLHttpRequest上傳文件 /title  script type= text/javascript  var xhr = new XMLHttpRequest(); //監(jiān)聽選擇文件信息 function fileSelected() { //HTML5文件API操作 var file = document.getElementById( fileName ).files[0]; if (file) { var fileSize = 0; if (file.size 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + MB  else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + KB  document.getElementById( fileName ).innerHTML = Name: + file.name; document.getElementById( fileSize ).innerHTML = Size: + fileSize; document.getElementById( fileType ).innerHTML = Type: + file.type; //上傳文件 function uploadFile() { var fd = new FormData(); //關(guān)聯(lián)表單數(shù)據(jù),可以是自定義參數(shù) fd.append( name , document.getElementById( name ).value); fd.append( fileName , document.getElementById( fileName ).files[0]); //監(jiān)聽事件 xhr.upload.addEventListener( progress , uploadProgress, false); xhr.addEventListener( load , uploadComplete, false); xhr.addEventListener( error , uploadFailed, false); xhr.addEventListener( abort , uploadCanceled, false); //發(fā)送文件和表單自定義參數(shù) xhr.open( POST , %=path% /user/uploadifyTest_doUpload  xhr.send(fd); //取消上傳 function cancleUploadFile(){ xhr.abort(); //上傳進度 function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById( progressNumber ).innerHTML = percentComplete.toString() + %  else { document.getElementById( progressNumber ).innerHTML = unable to compute  //上傳成功響應(yīng) function uploadComplete(evt) { //服務(wù)斷接收完文件返回的結(jié)果 alert(evt.target.responseText); //上傳失敗 function uploadFailed(evt) { alert( 上傳失敗  //取消上傳 function uploadCanceled(evt) { alert( 您取消了本次上傳.  /script  /head  body  form id= form1 enctype= multipart/form-data method= post action= upload.php  p >
fd.append( name , document.getElementById( name ).value);
fd.append( fileName , document.getElementById( fileName ).files[0]);
這兩句是把數(shù)據(jù)綁定到表單。因為html5支持多文件上傳，所以
document.getElementById( fileName ).files
返回的是數(shù)組。這里只有一個文件所以取下標0的元素。
xhr.upload.addEventListener( progress , uploadProgress, false);
xhr.addEventListener( load , uploadComplete, false);
xhr.addEventListener( error , uploadFailed, false);
xhr.addEventListener( abort , uploadCanceled, false);
這里綁定進度、上傳、錯誤、中斷的事件，提供一些交互。文件進度顯示就是在progress回調(diào)中進行顯示的。
然后貼上后臺代碼和action配置，UploadifyTestAction.java
package com.bjhit.eranges.actions.test;import java.io.File;import com.opensymphony.xwork2.ActionSupport;public class UploadifyTestAction extends ActionSupport { private static final long serialVersionUID = 837481714629791752L; private File fileName; private String name; private String responseInfo; public String doUpload() throws Exception { System.out.println(name); File myFile = fileName; System.out.println(myFile.getName()); responseInfo = 上傳成功!  return doUpload  public String getName() { return name; public void setName(String name) { this.name = name; public File getFileName() { return fileName; public void setFileName(File fileName) { this.fileName = fileName; public String getResponseInfo() { return responseInfo; public void setResponseInfo(String responseInfo) { this.responseInfo = responseInfo;}
action配置
 !-- 文件上傳例子 --  action name= uploadifyTest_* >
以上就是本篇文章的所有內(nèi)容了，希望對大家學(xué)習(xí)提供到幫助?。?/p>
相關(guān)推薦：
原生js實現(xiàn)html5打磚塊小游戲的方法
Ajax實現(xiàn)無閃爍定時刷新頁面實例代碼
有關(guān)Ajax中g(shù)et和post的使用問題
以上就是HTML5 Ajax文件上傳進度條如何顯示的詳細內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。