这篇文章主要介绍了html5 ajax文件上传进度条是如何显示的，基于原生html5实现，不需要falsh支持，进度可以自定义显示，控制灵活，对html5上传进度条感兴趣的小伙伴们可以参考一下
原本打算使用jquery插件进行异步文件上传，比如uploadfy但是需要额外的支持，也有人用iframe模仿异步上传机制，感觉都比较别扭。因为项目不考虑低版本浏览器，所以决定用html5实现。下面只是一个简单的demo，具体样式需要自己去做。
后台基于strut2进行文件处理，具体因项目而定。只是要注意设置文件大小的限制。 cf5d2c747a8a19aa752f3c38a33c8c15这个配置根据具体情况设定，超过此值会报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>
以上就是本篇文章的所有内容了，希望对大家学习提供到帮助！！
相关推荐：
原生js实现html5打砖块小游戏的方法
ajax实现无闪烁定时刷新页面实例代码
有关ajax中get和post的使用问题
以上就是html5 ajax文件上传进度条如何显示的详细内容。