基于原生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配置
这样基本的上传功能了。
