HTML5 Ajax文件上传进度条如何显示

原本打算使用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>

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方式文件上传进度条实现方法有所帮助。