在這個文檔里，我添加了一個

標簽 .. 上面定義了一個 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 》的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。