一个完整的网站制作需要哪些部分组成,企业网站 cms,买了深圳安居房后悔了,免费的企业网站建设这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的#xff0c;基于原生html5实现#xff0c;不需要falsh支持#xff0c;进度可以自定义显示#xff0c;控制灵活#xff0c;对HTML5上传进度条感兴趣的小伙伴们可以参考一下原本打算使用jquery插件进行异步文件上传基于原生html5实现不需要falsh支持进度可以自定义显示控制灵活对HTML5上传进度条感兴趣的小伙伴们可以参考一下原本打算使用jquery插件进行异步文件上传比如uploadfy但是需要额外的支持也有人用iframe模仿异步上传机制感觉都比较别扭。因为项目不考虑低版本浏览器所以决定用html5实现。下面只是一个简单的demo具体样式需要自己去做。后台基于strut2进行文件处理具体因项目而定。只是要注意设置文件大小的限制。 这个配置根据具体情况设定超过此值会报404.首先是上传页面,比较简单附带了文件上者这个参数。upload.jspString path request.getContextPath();%使用XMLHttpRequest上传文件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;elsefileSize (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, /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(您取消了本次上传.);}选择文件上传者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.javapackage 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配置responseInfotrue以上就是本篇文章的所有内容了希望对大家学习提供到帮助相关推荐
