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

}

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

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

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