基于原生html5實現，不需要falsh支持，進度可以自定義顯示，控制靈活，?本來打算使用jquery插件進行異步文件上傳，比如uploadfy但是需要額外的支持，也有人用iframe模仿異步上傳機制，感覺都比較別扭。因為項目不考慮低版本瀏覽器，所以決定用html5實現。下面只是一個簡單的demo，具體樣式需要自己去做。
后臺基于strut2進行文件處理，具體因項目而定。只是要注意設置文件大小的限制。? 這個配置根據具體情況設定，超過此值會報404.
首先是上傳頁面,比較簡單，附帶了文件上者這個參數。
upload.jsp
String path = request.getContextPath();
%>
使用XMLHttpRequest上傳文件var xhr = new XMLHttpRequest();
//監聽選擇文件信息??? 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();
//關聯表單數據,可以是自定義參數??? ?? fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0]);
//監聽事件??? ?? xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
//發送文件和表單自定義參數??? ?? xhr.open("POST", "/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';
}
}
//上傳成功響應??? function uploadComplete(evt) {
//服務斷接收完文件返回的結果??? ?alert(evt.target.responseText);
}
//上傳失敗??? function uploadFailed(evt) {
alert("上傳失敗");
}
//取消上傳??? function uploadCanceled(evt) {
alert("您取消了本次上傳.");
}
選擇文件
上傳者：
fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0]);
這兩句是把數據綁定到表單。因為html5支持多文件上傳，所以
document.getElementById('fileName').files返回的是數組。這里只有一個文件所以取下標0的元素。
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);這里綁定進度、上傳、錯誤、中斷的事件，提供一些交互。文件進度顯示就是在progress回調中進行顯示的。
然后貼上后臺代碼和action配置，UploadifyTestAction.java
action配置
這樣基本的上傳功能了。
)
