这篇文章主要介绍了HTML5+Ajax文件上传进度条怎么实现,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联是一家专注于成都网站制作、网站建设与策划设计,铁力网站建设哪家好?创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:铁力等地区。铁力做网站价格咨询:13518219792
原本打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制,感觉都比较别扭。因为项目不考虑低版本浏览器,所以决定用html5实现。下面只是一个简单的demo,具体样式需要自己去做。
后台基于strut2进行文件处理,具体因项目而定。只是要注意设置文件大小的限制。
首先是上传页面,比较简单,附带了文件上者这个参数。
upload.jsp
<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <% String path = request.getContextPath(); %>使用XMLHttpRequest上传文件
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配置
responseInfo true
这样基本的上传功能就实现了。
感谢你能够认真阅读完这篇文章,希望小编分享的“HTML5+Ajax文件上传进度条怎么实现”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!