html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示

这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的，基于原生html5实现，不需要falsh支持，进度可以自定义显示，控制灵活，对HTML5上传进度条感兴趣的小伙伴们可以参考一下

原本打算使用jquery插件进行异步文件上传，比如uploadfy但是需要额外的支持，也有人用iframe模仿异步上传机制，感觉都比较别扭。因为项目不考虑低版本浏览器，所以决定用html5实现。下面只是一个简单的demo，具体样式需要自己去做。

后台基于strut2进行文件处理，具体因项目而定。只是要注意设置文件大小的限制。 这个配置根据具体情况设定，超过此值会报404.

首先是上传页面,比较简单，附带了文件上者这个参数。

upload.jsp

String 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';

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", "/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配置

responseInfo

true

以上就是本篇文章的所有内容了，希望对大家学习提供到帮助！！

相关推荐：