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

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

相关推荐:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/306779.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构——哈弗曼编码问题

实验六 基于哈夫曼树的数据压缩算法 【实验目的】 掌握哈夫曼树的构造算法。掌握哈夫曼编码的构造算法。 【实验内容】 问题描述 输入一串字符,根据给定的字符串中字符出现的频率建立相应的哈夫曼树, 构造哈夫曼编码表,在此基础上可以对压缩文件进行压缩(即编码),同时可以对 压…

relation does not exist报错是什么意思_为什么Zookeeper天生就是一副分布式锁的胚子?...

“ 什么是分布式锁?分布式锁是控制分布式系统之间同步访问共享资源的一种方式。在分布式系统中,常常需要协调他们的动作。图片来自 Pexels如果不同的系统或是同一个系统的不同主机之间共享了一个或一组资源,那么访问这些资源的时候&#xff0…

netcore一键部署到linux服务器以服务方式后台运行

AntDeploy 是我开发一款开源一键发布插件将本地vs中的代码,一键打包,部署到任意的远程服务器部署方式支持 windows服务,linux服务,docker容器,iis支持增量发布(只更新有修改的)支持一键回滚(出了问题快速恢复)支持查看…

王某调离岗位后所使用计算机由新到任陈某,2017年沧州事业单位考试模拟卷

55. 关于刑法,表述正确的有:A.对于累犯不适用缓刑B.某甲犯故意杀人罪,但是有可能被适用缓刑C.已满十四周岁不满十六周岁的人不负刑事责任D.紧急避险超过必要限度造成不应有的损害的,应当负刑事责任56. 甲在回家途中发现乙正持刀追…

数据结构——基于 Dijsktra 算法的最短路径求解

实验七 基于 Dijsktra 算法的最短路径求解 【实验目的】 掌握图的邻接矩阵表示法,掌握采用邻接矩阵表示法创建图的算法。掌握求解最短路径的 Dijsktra 算法。 【实验内容】 问题描述 一张地图包括 n 个城市,假设城市间有 m 条路径(有向图),每条路径的长度 已知。给…

loadrunner录制事件为0_测试工具LoadRunner常见问题汇总,解决方案整理

LoadRunner是一种预测系统行为和性能的负载测试工具。通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找问题,可适用于各种体系架构的自动负载测试,能预测系统行为并评估系统性能。我们在使用它进行测试的过程中经常会遇到一些错误&…

.NET应用如何优雅的实现功能定时开关

点击上方蓝字关注“汪宇杰博客”导语我们在打工的时候,总能遇到一种类型的需求:“我想要这个活动广告在双11期间才显示”,“我想要这个API在20号以后才开放”,可能你觉得这个需求没什么难的,写个时间判断不就行了&…

用计算机组成原理+唐朔飞的,计算机组成原理 唐朔飞 习题解答

地址总线:用来指出数据总线上的源数据或目的数据在贮存单元的地址,是单向传输的,其位数与存储单元的个数有关(几次幂的关系)控制总线:用来发出各种控制信号的,对任意控制线,是单向的;对与机器字…

数据结构——图-迪杰斯特拉算法

问题描述 将图以邻接矩阵或邻接表存储&#xff0c;实现Dijkstra算法。 算法设计 迪杰斯特拉算法&#xff1a; 1.假设用带权的邻接矩阵arc&#xff0c;来表示带权有向图&#xff0c;arc[i][j]&#xff0c;表示弧<vi,vj>上的权值。若<vi,vj>不存在&#xff0c;则置…

单体 soa 微服务 区别_漫谈何时从单体架构迁移到微服务?

面对微服务如火如荼的发展&#xff0c;很多人都在了解&#xff0c;学习希望能在自己的项目中帮得上忙&#xff0c;当你对微服务的庐山真面目有所了解后&#xff0c;接下来就是说服自己了&#xff0c;到底如何评估微服务&#xff0c;什么时候使用微服务&#xff0c;什么时间点最…

2020了,最流行的密码依旧是123456

喜欢就关注我们吧&#xff01;密码管理器 NordPass 于日前发布的一份报告中揭示了 2020 年最常见的密码&#xff0c;并提供了有关如何使密码更安全的建议。根据 NordPass 的研究&#xff0c;在今年 200 种最常用的密码中&#xff0c;“123456”位居第一&#xff0c;有 250 万人…

计算机二级和英语四六级是同一个账号吗,英语四六级考试和计算机考试的登录账号和密码一样吗?我好像混了,但是密码一直输不对,...

两个密码都记得直接试就出来了非常的简单&#xff0c;如果实在不行的话重置一下大学英语六级考试(又称CET-6&#xff0c;全称为“College English Test-6”)是由国家统一出题的&#xff0c;统一收费&#xff0c;统一组织考试&#xff0c;用来评定应试人英语能力的全国性的考试&…

元祖python_python---tuple元祖

ython的元组与列表类似&#xff0c;不同之处在于元组的元素不能修改。 元组使用小括号&#xff0c;列表使用方括号。 元组创建很简单&#xff0c;只需要在括号中添加元素&#xff0c;并使用逗号隔开即可。 tup1 (physics, chemistry, 1997, 2000) tup2 (1, 2, 3, 4, 5 ) tup3…

C# 中的本地函数

今天我们来聊一聊 C# 中的本地函数。本地函数是从 C# 7.0 开始引入&#xff0c;并在 C# 8.0 和 C# 9.0 中加以完善的。引入本地函数的原因我们来看一下微软 C# 语言首席设计师 Mads Torgersen 的一段话&#xff1a;Mads Torgersen&#xff1a;我们认为这个场景是有用的 —— 您…

数据结构——图-有向图和无向图的邻接表基础

#include <stdio.h> #include <stdlib.h> #define VertexType char //顶点的数据类型&#xff08;char&#xff09; #define VertexMax 20 //最大顶点个数 typedef struct ArcNode//边表 {int adjvex;//存储的是该顶点在顶点数组即AdjList[]中的位置 struct ArcN…

2019山科计算机专业分数线,2019山东科技大学研究生分数线汇总(含2016-2019历年复试)...

2019山东科技大学研究生分数线(含2016-2019历年复试)考研就是人生的第二次高考&#xff0c;是再一次改变自己命运的机会&#xff0c;所谓7分靠努力&#xff0c;3分靠填报&#xff0c;山东科技大学历年研究生复试分数线是2019-2020届考研学子十分关心的问题&#xff0c;以下是如…

b+树时间复杂度_第15期:索引设计(索引组织方式 B+ 树)

谈到索引&#xff0c;大家并不陌生。索引本身是一种数据结构&#xff0c;存在的目的主要是为了缩短数据检索的时间&#xff0c;最大程度减少磁盘 IO。任何有数据的场景几乎都有索引&#xff0c;比如手机通讯录、文件系统(ext4xfsfs)、数据库系统(MySQLOracle)。数据库系统和文件…

结合控制台程序和K8S的CronJob完成定时任务

前言 老黄前段时间遇到了一个数据清洗的需求&#xff0c;其实就是每天凌晨把昨天的数据清洗一遍&#xff0c;归归类。这是一个比较典型的定时任务的处理场景。定时任务可以说就一把利器&#xff0c;几乎每个公司都离不开&#xff0c;它的应用场景也不在少数&#xff0c;比如&am…

数据结构——图-有向带权图的邻接表基础

#include <stdio.h> #include <stdlib.h> #define VertexType char //顶点的数据类型&#xff08;char&#xff09; #define VertexMax 20 //最大顶点个数 typedef struct ArcNode//边表 {int adjvex;//存储的是该顶点在顶点数组即AdjList[]中的位置int weight; …

vs里面mfc是什么_最近!一大批人正在前往文安,究竟发生了什么?

阅读本文前&#xff0c;请您先点击上面蓝色字体“文安家乡群”再点击“关注”&#xff0c;这样您就可以加入文安家乡群了。最近&#xff0c;文安的火车站汽车站&#xff0c;来了一大批外地人&#xff0c;挤爆了文安车站…究竟发生了什么事儿&#xff1f;让这么多人蜂拥而至&…