HTML5結合ajax實現檔案上傳以及進度顯示
基於原生html5實現，不需要falsh支援，進度可以自定義顯示，控制靈活， 本來打算使用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
//監聽選擇檔案資訊
function fileSelected() {
//HTML5檔案API操作
var file = document.getElementById('fileName').files[0];
if (file) {
var
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>
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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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;
}
}
|
| 1 2 3 |
private ImageView image;
image = (ImageView) findViewById(R.id.xx_id);
image.setAlpha(0);
|