文档章节

使用progress元素来显示文件的读取进度

孟飞阳
 孟飞阳
发布于 2017/07/23 21:52
字数 199
阅读 30
收藏 0

使用progress元素来显示文件的读取进度

使用progress元素来显示文件的读取进度

FileReader在读取文件的过程中可能多次触发onprogress事件,通过该事件绑定监听器即可实时监控文件的读取进度。

上面代码使用了<progress.../>元素来显示文件的读取进度。

在上面代码中FileReader的onprogress事件指定了事件监听器,在文件上传过程中,FileReader会多次触发onprogress事件监听函数,在该函数中程序修改了<progress.../>元素的value属性,这样即可让<progress.../>元素实时显示文件的上传进度。

在浏览器页面,选择文件后,点击“读取二进制文件”按钮,可以看到上传进度条。

© 著作权归作者所有

孟飞阳
粉丝 217
博文 1050
码字总数 564830
作品 5
朝阳
个人站长
私信 提问
网页动画技巧-带反色数字的进度条

用SVG编写的进度条,进度完成和未完成部分的数字颜色相反。 源码 预览 关键词 SVG clipPath svg linearGradient 笔记 为了使这个进度条封装成一个组件,在SVG文件中编辑图形和javascript函数...

轻灵子
01/17
0
0
Html5添加SVG的轻量级jQuery进度条插件教程

一、使用方法 使用该jQuery进度条插件需要引入jQuery和jquery.progress.js文件。 <script src="js/jquery.min.js"></script> <script src="js/jquery.progress.js"></script> 二、Html结构 ......

大街小巷
2016/01/05
51
0
(转载学习)文件上传的渐进式增强

本文为转载学习 原文作者:阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/08/fileupload.html HTML5提供了一系列新的浏览器API,使得文件上传有可能出现革命性变化。英国程序员Rem...

heroShane
2014/01/24
47
0
使用 JavaScript File API 实现文件上传

File API 是 Mozilla 向 W3C 提出的一个草案,旨在用标准 JavaScript API 实现本地文件的读取。File API 将极大地方便 Web 端的文件上传等操作,并有望成为未来的 HTML 5 规范的一部分。本文...

红薯
2011/01/24
2.6K
6
PaintCode 教程2:自定义进度条

PaintCode 是一个能够让你像Photoshop一样去设计你的用户界面的软件 – 但是它并不是仅仅保存一张图片当作资源让你来使用,它能够为你生成 CoreGraphic 源码直接使用到View的绘制中. 在这个系...

Snaiper
2016/01/14
134
0

没有更多内容

加载失败,请刷新页面

加载更多

《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
4
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
6
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
4
0
OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
992
11
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部