原本打算使用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"> <p class="row"> <label for="filetoupload">选择文件</label> <input type="file" name="filename" id="filename" onchange="fileselected();"/> </p> <p id="filename"></p> <p id="filesize"></p> <p id="filetype"></p> <p class="row"> 上传者：<input type="text" name="name" id="name"/> <input type="button" onclick="uploadfile()" value="上传" /> <input type="button" onclick="cancleuploadfile()" value="取消" /> </p> <p id="progressnumber"></p> </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
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; } }
action配置
<!-- 文件上传例子 --> <action name="uploadifytest_*" class="com.bjhit.eranges.actions.test.uploadifytestaction" method="{1}"> <result name="doupload" type="json"> <param name="includeproperties">responseinfo</param> <param name="excludenullproperties">true</param> </result> </action>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
ajax读取json数据的方法
构造ajax实现表单json转换的方法
以上就是html5+ajax文件上传进度条显示（图文详解）的详细内容。