html资源文件记载进度条,用进度条显示文件读取进度《 HTML5：文件 API 》
在这个文档里，我添加了一个
// 找到显示事件状态的容器
var eventStatus = document.getElementById("eventstatus");
然后再去创建进度条需要的元素 … 先创建一个
再把这个
// 进度显示器需要的元素
var progress = document.createElement("div");
progress.classList.add("progress", "progress-striped", "active");
var progressBar = document.createElement("div");
progressBar.classList.add("progress-bar");
progress.appendChild(progressBar);
下面再去创建事件处理器 …
loadstart 事件发生以后，会去执行 onloadstart 这个事件处理器 …
reader.onloadstart = function(){
eventStatus.appendChild(progress);
};
loadstart 事件发生以后，也就是开始开始读文件的时候 … 我们把刚才创建的 progress 这个元素添加到 eventStatus 这个容器里面 ….
然后再去处理一下 onprogress 这个事件处理器 … 每次发生 progress 事件的时候，会调用它 …
调用的时候，我们让它去设置一下 progressBar 的 style 属性 … 设置元素的属性，可以使用 setAttribute() .. 第一个参数是属性的名称 … 第二个参数是属性的值 .. 属性的值，我们使用之前计算出来的文件读取进度的百分比 …
progressBar.setAttribute("style", progressStatus);
再修改一下这个 progressStatus .. 在百分比的前面，再加上一个 widh: ...
var progressStatus = "width:" + Math.round(evt.loaded / evt.total * 100) + "%" ;
最后我们需要再判断一下文件读取的状态 . … 如果读取完成了 … 就用不到这个进度条了 … 所以可以把 eventStatus 里面的内容设置成空白的 …
判断一下 readyState 的值是否等于 2 …. 如果等于 2，表示已经完成了读取 ….
if(evt.target.readyState === 2){
eventStatus.innerHTML = "";
}
保存 … 再去浏览器里预览一下 …
选择文件 … 找一个大一些的文件 … 打开 …
你会看到 … 在页面上，会使用一个进度条 … 实时的显示文件当前的读取进度 ….
相关文章：
JS中根据某个值进行大小排序
//从大到小排序 function compareBigToSmall(property){return function(a,b){var value1 a[property];var value2 b[property];return value2 - value1;} }; //从小到大排序 function compareSmallToBig(property){return function(a,b){var value1 a[property];var value…
react native 常用学习或查资料网址
react-native facebook官网：http://facebook.github.io/react-native/ 中文网：http://reactnative.cn/ react 官网地址：http://facebook.github.io/react/ Github地址：https://github.com/facebook/react 阮一峰教程：…
使用WinPcap和libpcap类库读写pcap文件（002）PCAP文件格式
本文基本翻译自https://wiki.wireshark.org/Development/LibpcapFileFormat，主要分析pcap文件的格式。 其中一些字段可能和现在的WinPcap类库里的字段不同，请结合当前WinPcap库分析。 libpcap文件格式 libpcap文件格式是TcpDump/WinDump，Wir…
图论-最短路径--3、SPFA算法O(kE)
SPFA算法O(kE) 主要思想是： 初始时将起点加入队列。每次从队列中取出一个元素，并对所有与它相邻的点进行修改，若某个相邻的点修改成功，则将其入队。直到队列为空时算法结束。 这个算法，简单的说就是队列优化的bellman-…
如何在HHDI中进行数据质量探查并获取数据剖析报告
通过执行多种数据剖析规则，对目标表（或一段SQL语句）进行数据质量探查，从而得到其数据质量情况。目前支持以下几种数据剖析类型，分别是：数字值分析、值匹配检查、字符值分析、日期值分析、布尔值分析、重复值…
html5网页怎么实现内容追加,纯js实现网页内容复制后自动追加自定义内容
网页操作内容复制内容后纯js实现监听自动追加自定义内容不少网站技术或者博客上有这样的处理，当我们复制代码的时候，会自动加上一段本信息版权为XXXX，这是怎么实现的呢？其实实现的方式很简单，可以在我的网站页面上绑定…
ios Standard Framework和Umbrella Framework
Standard Framework：标准库，通过引用对应的header文件而不是引用master header 文件来引用类(也可以通过引用Master Header file来引用需要使用的类)，只需要暴露对应的header文件到Header文件夹下即可，不强制引用master header文件…
Win7使用Visual Studio 2010编译用于Qt4.8.6的MySQL驱动
其实编译过程在Qt Creator 的帮助文档里有，我就是照着做的，但是没成功，因为不能照搬照抄！ 1.确保path环境变量里有QTDIR，这个就不细说了。 2.打开"开始"->"Microsoft Visual Studio 2010"->…
ios 常见性能优化
1. 用ARC管理内存 2. 在正确的地方使用reuseIdentifier 3. 尽可能使Views透明 4. 避免庞大的XIB 5. 不要block主线程 6. 在Image Views中调整图片大小 7. 选择正确的Collection 8. 打开gzip压缩 9. 重用和延迟加载Views 10. Cache, Cache, 还是Cache！ 11. 权衡渲染方…
强化学习（七）时序差分离线控制算法Q-Learning
在强化学习（六）时序差分在线控制算法SARSA中我们讨论了时序差分的在线控制算法SARSA，而另一类时序差分的离线控制算法还没有讨论，因此本文我们关注于时序差分离线控制算法，主要是经典的Q-Learning算法。 Q-Learning这一…
react遇到的各种坑
标签里用到<label for>的，for 要写成htmlFor标签里的class要写成className组件首字母一定要大写单标签最后一定要闭合如果html里要空格转义， 注意不要漏了分号;style要写成style{{clear: both,backgroundColor:red,width:200px}}组件里能用<but…
html页面视频标签,html5基础标签(html5视频标签 html5新标签用法)
点评：html5基础，包括html5视频标签和html5新标签等标签用法，大家参考使用吧1、 声明的变化2、 指定字符编码的变化，html5中建议使用utf-83、 Html5中允许没有结束符，不算错误4、 不允许写结束标记的有：…
chronyd服务
一、makestep步进时间选项 最近做RHCE的实验，nfs用krb5p实现全程加密和身份认证，需要nfs服务端、客户端的时间与KDC的时间同步，否则kerberos分发的ticket就会失效，nfs不能挂载和访问。那么就需要在nfs的服务端、客户端都配置chro…
软件测试人员必备Linux命令（初、中、高级）
有些技能可以事半功倍，有些命运掌握在我们手中。熟练的掌握和使用这些命令可以提高工作效率，并且结合这些命令对测试过程中遇到的问题进行一些初步的定位。 1 目录与文件操作 1.1 ls(初级) 使用权限：所有人 功能 : 显示指定工作目录下之内容&…
酷派android手机怎么截屏,酷派S688怎么截屏截图？
夏普AQUOS S2事水滴全面屏，搭配骁龙630处理器，个人手里就是这货，目前售价千元内，按需求不高的人，可以考虑，不过系统不很行基于Android 7.1.1深度优化的Smile UX系统实在表现一般。~~~~根据美国FCC的认证信息…
01 多线程概念及其实现方式
多线程是编程过程里必不可少的内容，学习多线程，就先要了解进程和线程的概念。进程：是指当前正在运行的程序，是一个程序在内存里的执行区域；线程：是在进程里的一个执行控制单元，执行路径…
负载均衡层次分析
什么是负载均衡 负载均衡(Load Balance)是分布式系统架构设计中必须考虑的因素之一，它通常是指，将请求/数据【均匀】分摊到多个操作单元上执行，负载均衡的关键在于【均匀】。 常见的负载均衡方案 常见互联网分布式架构如上，分为客…
Python基础01-Python环境搭建与HelloWorld
目录 从今天开始学习Python Python环境搭建 安装gcc Python源码包安装 开始Python第一个代码HelloWorld！ 从今天开始学习Python 为啥选择Python，可能是跟随潮流吧。我现在不知道为什么学习Python，但是可能一年到一年半以后，…
oracle与mysql创建表时的区别
oracle创建表时，不支持在建表时同时增加字段注释。故采用以下方式： #创建表 CREATE TABLE predict_data as (id integer NOT NULL, uid varchar2(80),mid varchar2(80),time date ,conten…
在Linux上安装Memcached服务
下载并安装Memcache服务器端 服务器端主要是安装memcache服务器端. 下载：http://www.danga.com/memcached/dist/memcached-1.2.2.tar.gz 另外，Memcache用到了libevent这个库用于Socket的处理，所以还需要安装libevent，libevent的最…
图形化编程 html,用GoJS实现图形化交互编程界面示例
JavaScript语言：JaveScriptBabelCoffeeScript确定function init() {var $ go.GraphObject.make; //for conciseness in defining node templatesmyDiagram $(go.Diagram, "myDiagramDiv", //Diagram refers to its DIV HTML element by id{"undoMan…
枚举位移计算操作
如： typedef NS_ENUM(NSInteger, Test) { // 十进制 二进制 TestA 1 << 0, // 1 00001 TestB 1 << 1, // 2 …
Python基础02-Python基础
脚本的第一行 Python脚本的第一行，写Python解释器的路径。这样就可以直接执行Python脚本。 脚本编码 Python2需要指定脚本的编码，Python3不需要指定。 # -*- coding:utf8 -*- 使用input做简单的交互 username input(请输入用户名密码:) password …
SpringBoot上传文件大小限制
SpringBoot默认上传文件大小不能超过1MB，超过之后会报以下异常： org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes.at org.apache.tomcat.…
html实时显示log,websocketd 实现浏览器查看服务器实时日志
操作系统CentOS7下载 websocketd安装 nc 命令yum install nmap-ncat创建监听脚本cat > cmd.sh <#!/bin/bashpkill -x ncwhile :; donc -nkl 10088sleep 1done创建 log.htmlbody{background-color: #0e1012;color: #ffffff;}*{margin: 0; padding: 0;}#msg{overflow:auto;…
git 合并两个分支的某个文件
软件开发基本都是多个feature分支并行开发，而在上线前有可能某个分支的开发或测试还没有完成，又或者是产品调整，取消了该分支功能的上线计划，我们在release前不合并该分支即可，然而如果该分支中的某些小调整却需要上线…
lattice diamond 3.7安装破解
第一步安装：执行.EXE文件，一直下一步，最后license选择没有USB什么的那个（具体记不清了）。 第二步破解：安装完成后在环境变量中将license路径指定到license文件即可（LM_LICENSE_FILE d:\lscc…
Python基础03-运算符
运算符 算数运算符 算数运算符符号运算数字用法举例字符串用法举例加a 2 3 print(a) # 5s1 "hello" s2 "world" s s1 s2 print(s) # helloworld-减a 12 - 3 print(a) # 9*乘a 12 * 3 print(a) # 36s1 "hello" s2 "world" s…
shell下的作业管理(转)
作业管理 举例来说，我们在登陆 bash 后， 想要一边复制文件、一边进行数据搜寻、一边进行编译，还可以一边进行 vi 程序撰写！ 当然我们可以重复登陆那六个文字介面的终端机环境中，不过，能不能在一个 bash 内达…
合并模拟器和真机的静态库动态库aggregate
创建Aggregate的target 在Build Phases 添加Run Script,内容为 scriptFile${SRCROOT}/universalA.shsh ${scriptFile} universalA.sh放在工程根目录，内容为： if [ "${ACTION}" "build" ]then echo "合并模拟器真机库" ta…