html资源文件记载进度条,用进度条显示文件读取进度《 HTML5：文件 API 》

在这个文档里，我添加了一个

标签 .. 上面定义了一个 ID 是 eventstatus … 我们可以把进度条放在这个容器里面 … 先找到用来显示进度条的容器 …

// 找到显示事件状态的容器

var eventStatus = document.getElementById("eventstatus");

然后再去创建进度条需要的元素 … 先创建一个

标签 … 叫它 progress … 给它添加一些 css 类 … 然后再去创建一个

标签，它的名字是 progressBar … 再给它添加一个 progress-bar 的 css 类 …

再把这个

标签添加到之前创建的

标签里面 …

// 进度显示器需要的元素

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 = "";

}

保存 … 再去浏览器里预览一下 …

选择文件 … 找一个大一些的文件 … 打开 …

你会看到 … 在页面上，会使用一个进度条 … 实时的显示文件当前的读取进度 ….

html资源文件记载进度条,用进度条显示文件读取进度《 HTML5：文件 API 》相关推荐

php 读取 stl 文件,科学网—[转载]【源码】读取ASCII STL文件的STLReader - 刘春静的博文...
读取包含顶点和面的ASCII STL文件,并将其构造为矩阵"顶点"."颜色"和"面".之后,使用各小模块在Matlab上建立模型. Read ...
project文件_移动和发出时通过UploadsReWriter读取的任意文件
摘要这个UploadsRewriter不验证文件名,允许在将问题转移到新项目时通过目录遍历复制任意文件. 用于查找引用的模式是: MARKDOWN_PATTERN = %r{!?[.*?](/upl ...
GameFramework：资源热更代码分析，检查版本信息，下载版本文件，校验版本文件，得到更新文件数量，下载文件，TaskPool
资源下载流程图流程跳转的日志版本信息-版本检测-下载版本列表-下载散文件代码分析进入ProcedureCheckVersion.OnEnter流程,进行task请求,userData为StarF ...
jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
JS 变量保存为本地json文件，读取本地json文件为变量
一.变量保存为本地json文件: 第一步:把返回的数据转成json格式 var content = json.stringify(data); 第二步:把转成blob这种格式 ...
javaftp读取服务器文件,java读取ftp服务器文件
java读取ftp服务器文件内容精选换一换文件系统创建完成后,用户需在客户端挂载文件共享,在本地共享目录和CSG的文件共享建立映射,通过操作本地的目录实现对CSG共享目录的操作,实现数据实时上云 ...
html资源文件记载进度条,HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
Visual C++利用互斥量同步线程实现文件读取进度条
忘了原文的位置了. 一.前言文件读取进度条的实现可以有很多种方法,常用的是在读取文件的过程中隔一定时间向对话框发送消息以控制进度条的位置,但是这种方法很难确定隔多少时问发送一个消息,因为文件的大小是 ...
php 拖拽上传文件进度,在Vue中如何实现带进度条的文件拖动上传功能
这篇文章主要介绍了Vue实现带进度条的文件拖动上传功能,本文通过实例代码给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下 1. 基本界面 content="width=devic ...

html资源文件记载进度条,用进度条显示文件读取进度《 HTML5：文件 API 》

html资源文件记载进度条,用进度条显示文件读取进度《 HTML5：文件 API 》相关推荐

最新文章

热门文章