HTML5 Ajax文件上传进度条如何显示
原本打算使用jquery插件进行异步文件上传，比如uploadfy但是需要额外的支持，也有人用iframe模仿异步上传机制，感觉都比较别扭。因为项目不考虑低版本浏览器，所以决定用html5实现。下面只是一个简单的demo，具体样式需要自己去做。
后台基于strut2进行文件处理，具体因项目而定。只是要注意设置文件大小的限制。 <constantname="struts.multipart.maxSize"value="52428800"/>这个配置根据具体情况设定，超过此值会报404.
首先是上传页面,比较简单，附带了文件上者这个参数。
upload.jsp
<%@pagelanguage="java"pageEncoding="UTF-8"contentType="text/html;charset=UTF-8"%>
<%
Stringpath=request.getContextPath();
%>
<!DOCTYPEhtml>
<html>
<head>
<title>使用XMLHttpRequest上传文件</title>
<scripttype="text/javascript">
varxhr=newXMLHttpRequest();
//监听选择文件信息
functionfileSelected(){
//HTML5文件API操作
varfile=document.getElementById('fileName').files[0];
if(file){
varfileSize=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;
}
}
//上传文件
functionuploadFile(){
varfd=newFormData();
//关联表单数据,可以是自定义参数
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);
}
//取消上传
functioncancleUploadFile(){
xhr.abort();
}
//上传进度
functionuploadProgress(evt){
if(evt.lengthComputable){
varpercentComplete=Math.round(evt.loaded*100/evt.total);
document.getElementById('progressNumber').innerHTML=percentComplete.toString()+'%';
}
else{
document.getElementById('progressNumber').innerHTML='unabletocompute';
}
}
//上传成功响应
functionuploadComplete(evt){
//服务断接收完文件返回的结果
alert(evt.target.responseText);
}
//上传失败
functionuploadFailed(evt){
alert("上传失败");
}
//取消上传
functionuploadCanceled(evt){
alert("您取消了本次上传.");
}
</script>
</head>
<body>
<formid="form1"enctype="multipart/form-data"method="post"action="upload.php">
<divclass="row">
<labelfor="fileToUpload">选择文件</label>
<inputtype="file"name="fileName"id="fileName"onchange="fileSelected();"/>
</div>
<divid="fileName"></div>
<divid="fileSize"></div>
<divid="fileType"></div>
<divclass="row">
上传者：<inputtype="text"name="name"id="name"/>
<inputtype="button"onclick="uploadFile()"value="上传"/>
<inputtype="button"onclick="cancleUploadFile()"value="取消"/>
</div>
<divid="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
packagecom.bjhit.eranges.actions.test;
importjava.io.File;
importcom.opensymphony.xwork2.ActionSupport;
publicclassUploadifyTestActionextendsActionSupport{
privatestaticfinallongserialVersionUID=837481714629791752L;
privateFilefileName;
privateStringname;
privateStringresponseInfo;
publicStringdoUpload()throwsException{
System.out.println(name);
FilemyFile=fileName;
System.out.println(myFile.getName());
responseInfo="上传成功!";
return"doUpload";
}
publicStringgetName(){
returnname;
}
publicvoidsetName(Stringname){
this.name=name;
}
publicFilegetFileName(){
returnfileName;
}
publicvoidsetFileName(FilefileName){
this.fileName=fileName;
}
publicStringgetResponseInfo(){
returnresponseInfo;
}
publicvoidsetResponseInfo(StringresponseInfo){
this.responseInfo=responseInfo;
}
}
action配置
<!--文件上传例子-->
<actionname="uploadifyTest_*"class="com.bjhit.eranges.actions.test.UploadifyTestAction"method="{1}">
<resultname="doUpload"type="json">
<paramname="includeProperties">responseInfo</param>
<paramname="excludeNullProperties">true</param>
</result>
</action>
这样基本的上传功能就实现了。
感谢大家的阅读，希望本文所述对大家学习Ajax方式文件上传进度条实现方法有所帮助。