選取及操作使用者本機裝置上的檔案，是網頁最常用的功能之一。使用者可以選取檔案並上傳至伺服器，例如分享相片或提交稅務文件。網站也能讀取及操控這些資料，完全不必透過網路傳輸資料。本頁面逐步說明如何使用 JavaScript 與檔案互動。
新版 File System Access API
File System Access API 可讓您讀取及寫入使用者本機系統中的檔案和目錄。這項功能適用於大多數採用 Chromium 的瀏覽器，例如 Chrome 和 Edge。如要進一步瞭解這項 API，請參閱「File System Access API」。
由於 File System Access API 與部分瀏覽器不相容，建議使用 browser-fs-access，這個輔助程式庫會在可用的情況下使用新版 API，並在無法使用時改用舊版方法。
以傳統方式處理檔案
本指南說明如何使用舊版 JavaScript 方法與檔案互動。
選取檔案
選取檔案的方式主要有兩種：使用 HTML 輸入元素，以及使用拖曳區。
HTML 輸入元素
使用者選取檔案最簡單的方式是使用 <input type="file"> 元素，所有主要瀏覽器都支援這個元素。使用者點選後，即可透過作業系統內建的檔案選取 UI 選取檔案 (如果包含 multiple 屬性，則可選取多個檔案)。使用者選取完一或多個檔案後，元素會觸發 change 事件。您可以從 event.target.files 存取檔案清單，這是 FileList 物件。FileList 中的每個項目都是 File 物件。
<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>
<script>
const fileSelector = document.getElementById('file-selector');
fileSelector.addEventListener('change', (event) => {
const fileList = event.target.files;
console.log(fileList);
});
</script>
在下列範例中，使用者可以透過作業系統內建的檔案選取 UI 選取多個檔案，然後將每個選取的檔案記錄到控制台中。
限制使用者可選取的檔案類型
在某些情況下，您可能會想限制使用者可選取的檔案類型。舉例來說，圖片編輯應用程式應只接受圖片，而非文字檔。如要設定檔案類型限制，請在輸入元素中加入 accept 屬性，指定可接受的檔案類型：
<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">
自訂拖曳
在某些瀏覽器中，<input type="file"> 元素也是放置目標，可讓使用者將檔案拖曳到應用程式中。不過，這個放置目標很小，可能難以使用。您可以使用 <input type="file"> 元素提供核心功能，然後提供大型的自訂拖曳介面。
選擇卸貨區
放置表面取決於應用程式的設計。您可能只希望部分視窗成為放置介面，但您可以使用整個視窗。
使用者可以將圖片拖曳至 Squoosh 圖片壓縮應用程式視窗的任何位置，然後按一下「選取圖片」來叫用 <input type="file"> 元素。無論選擇哪個區域做為放置區，請務必讓使用者清楚瞭解他們可以將檔案拖曳到該區域。
定義放置區域
如要將元素設為拖曳區域，請為兩個事件建立監聽器：dragover 和 drop。dragover 事件會更新瀏覽器 UI，以視覺化方式指出拖曳動作正在建立檔案副本。使用者將檔案放到介面上後，系統會觸發 drop 事件。與輸入元素相同，您可以從 event.dataTransfer.files 存取檔案清單，這是 FileList 物件。FileList 中的每個項目都是 File 物件。
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', (event) => {
event.stopPropagation();
event.preventDefault();
// Style the drag-and-drop as a "copy file" operation.
event.dataTransfer.dropEffect = 'copy';
});
dropArea.addEventListener('drop', (event) => {
event.stopPropagation();
event.preventDefault();
const fileList = event.dataTransfer.files;
console.log(fileList);
});
event.stopPropagation()
和 event.preventDefault()
停止瀏覽器的預設行為，改為執行您的程式碼。否則，瀏覽器會離開您的網頁，並開啟使用者拖曳到瀏覽器視窗中的檔案。
如需即時示範，請參閱「自訂拖曳」。
目錄呢？
很抱歉，目前無法透過 JavaScript 存取目錄。
<input type="file"> 元素上的 webkitdirectory 屬性可讓使用者選擇一或多個目錄。大多數主要瀏覽器都支援這項功能，但 Android 版 Firefox 和 iOS 版 Safari 除外。
如果啟用拖曳功能，使用者可能會嘗試將目錄拖曳到放置區。當卸除事件觸發時，會包含目錄的 File 物件，但不會提供目錄中任何檔案的存取權。
讀取檔案中繼資料
File 物件包含檔案的中繼資料。大多數瀏覽器都會提供檔案名稱、檔案大小和 MIME 類型，但不同瀏覽器可能會根據平台提供不同或額外的資訊。
function getMetadataForFileList(fileList) {
for (const file of fileList) {
// Not supported in Safari for iOS.
const name = file.name ? file.name : 'NOT SUPPORTED';
// Not supported in Firefox for Android or Opera for Android.
const type = file.type ? file.type : 'NOT SUPPORTED';
// Unknown cross-browser support.
const size = file.size ? file.size : 'NOT SUPPORTED';
console.log({file, name, type, size});
}
}
您可以在input-type-file示範中查看實際運作情形。
讀取檔案內容
使用 FileReader 將 File 物件的內容讀取至記憶體。您可以指示 FileReader 將檔案讀取為陣列緩衝區、資料網址或文字：
function readImage(file) {
// Check if the file is an image.
if (file.type && !file.type.startsWith('image/')) {
console.log('File is not an image.', file.type, file);
return;
}
const reader = new FileReader();
reader.addEventListener('load', (event) => {
img.src = event.target.result;
});
reader.readAsDataURL(file);
}
這個範例會讀取使用者提供的 File，然後將其轉換為資料網址，並使用該資料網址在 img 元素中顯示圖片。如要瞭解如何驗證使用者是否已選取圖片檔案，請參閱 read-image-file 示範。
監控檔案讀取進度
讀取大型檔案時，提供一些 UX 資訊，讓使用者瞭解讀取進度，會很有幫助。為此，請使用 FileReader 提供的 progress 事件。progress 事件有兩個屬性：loaded (讀取量) 和 total (讀取量)。
function readFile(file) {
const reader = new FileReader();
reader.addEventListener('load', (event) => {
const result = event.target.result;
// Do something with result
});
reader.addEventListener('progress', (event) => {
if (event.loaded && event.total) {
const percent = (event.loaded / event.total) * 100;
console.log(`Progress: ${Math.round(percent)}`);
}
});
reader.readAsDataURL(file);
}
主頁橫幅圖片來源：Unsplash 的 Vincent Botta