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方式文件上传进度条实现方法有所帮助。
上一篇： linux shell (()) 双括号运算符使用
下一篇： ASP采集入库生成本地文件的几个函数