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)