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  p >
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_* >
以上就是本篇文章的所有内容了，希望对大家学习提供到帮助！！
相关推荐：
原生js实现html5打砖块小游戏的方法
Ajax实现无闪烁定时刷新页面实例代码
有关Ajax中get和post的使用问题
以上就是HTML5 Ajax文件上传进度条如何显示的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。