原本打算使用jquery插件進行異步文件上傳，比如uploadfy但是需要額外的支持，也有人用iframe模仿異步上傳機制，感覺都比較別扭。因為項目不考慮低版本瀏覽器，所以決定用html5實現。下面只是一個簡單的demo，具體樣式需要自己去做。
后臺基于strut2進行文件處理，具體因項目而定。只是要注意設置文件大小的限制。 <constant name="struts.multipart.maxSize" value="52428800"/>這個配置根據具體情況設定，超過此值會報404.
首先是上傳頁面,比較簡單，附帶了文件上者這個參數。
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(); //監聽選擇文件信息 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", "<%=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'; } } //上傳成功響應 function uploadComplete(evt) { //服務斷接收完文件返回的結果 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"><div class="row"> <label for="fileToUpload">選擇文件</label><input type="file" name="fileName" id="fileName" onchange="fileSelected();"/> </div><div id="fileName"></div><div id="fileSize"></div><div id="fileType"></div><div class="row">上傳者：<input type="text" name="name" id="name"/><input type="button" onclick="uploadFile()" value="上傳" /><input type="button" onclick="cancleUploadFile()" value="取消" /> </div><div id="progressNumber"></div></form></body></html>
新聞熱點
疑難解答
圖片精選
