天天看點

Html5檔案讀取

    1.圖檔的讀取

            var fileReader = new FileReader();

            fileReader.readAsDataURL(fileObj)

            fileReader.onload = function(){

                fileReader.result;//圖檔的src 該值作為 img src屬性值

            }

    2.文本檔案的讀取

            var fileReader = new FileReader();

            fileReader.readAsText(fileObj,"文本原來的字元編碼")

            fileReader.onload = function(){

                fileReader.result;//文本的内容

            }

    3.讀取多個檔案

           <input type='file' multiple="multiple">

           fileDom.onchange = function(ev){

                //選中的所有檔案對象

                ev.target.files;

           }

潛在的BUG。變量提升(作用于提升)---- 重點掌握

- 作用于的概念 (全局作用域,函數作用域)

- 當變量定義在for循環中,定義在for循環中的變量會被提升到作用域的頂部。

- 主程式(for循環)執行的速度用于大于檔案加載的速度。

- 造成全局變量被最後一個檔案對象替換,導緻第一個檔案對象加載後,無法通知主程式。也就無法顯示第一張圖檔。

- 解決辦法:把檔案讀取(加載)得邏輯,封裝一個方法(function)

繼續閱讀