HTML JS 動態顯示 input file 選取內容
使用 HTML 取得本地檔案 <input type="file" id="testFile" /> File API 可以從 File 物件中讀取 FileList ， FileList 內包含使用者所選取的檔案。 如果使用者只選擇一個檔案，那麼我們只需要考慮第一個檔案物件。 使用 DOM 獲取選擇的檔案 HTML: <input type="file" id="testFile" /> JS: var file = document.getElementById('testFile').files[0]; 使用 JQUERY 獲取選擇的檔案 HTML: <input type="file" id="testFile" /> JS: var file = $('#testFile').get(0).files[0]; 使用 change event 獲取選擇的檔案 HTML: <input type="file" id="testFile" onchange="selectFile(this.files)" /> JS: function selectFile(files) { var file = files[0]; } 獲得選取的檔案資訊 上述的例子顯示獲取在檔案清單裡所有檔案物件的方法。 File 提供三個包含檔案重要訊息的屬性。 name : 唯讀的檔案名稱，並未包含檔案路徑。 size : 為 64 位元的整數，用以表示檔案的 byte 的長度。 type : 為唯讀字串。表示檔案的 MIME-type 。若是無法取得檔案的 Mime-type ，則其值會是一個空字串 “”。 使用 FileReader 讀取文件內容 讀取文字 HTML: <input type="file" onchange="selectTextFile(this.files)" /> <p id="showText">...