# 6.1 基本使用 ## 常用的有以下三個資料 * `FileList`：會是一個檔案列表物件，該物件裡面會有 File 物件。 * `File`：即 File 物件，通常代表的是某個檔案。 * `FileReader`：透過 FileReader 取得 File 物件的基本資訊。 ## 練習 1：取得 FileList 物件與 File 物件 建立 `html5/file/file1.html` 檔案。 內容如下：建立一個 `type="file"` 的 `input` 標籤： ```markup File API ``` 試著撰寫以下相關程式： * `#the_file` 觸發 `change` 事件 * 取得檔案的物件( `this.files` )，然後於 console.log 中印出來。 * 取得第一個檔案( `this.files[0]` )，然後於 console.log 中印出來。 ### 執行結果 執行結果如下圖，在 console 中觀察，的確有取得了 `FileList` 與 `File` 物件，如下圖： ![取得 FileList 與 File 物件](/files/-M1LKrvXFbYzj_pdYHdP) 觸發 `change` 事件之後，就可以透過 `this.files` 和 `this.files[0]` 來取得 `FileList` 與 `File`。 * FileList：`FileList` 物件，存多個 `File` 物件。 * File：個別檔案的 `File` 物件，存著檔案的基本資料，從上圖可以看出主要有 `name`、`lastModified`、`size`、`type`。 {% hint style="info" %} 試著將 input 欄位，加上 **`multiple`** 屬性，變成多選，再觀察看看，使用者選了多個檔案的話，FileList 物件就會存多個 File。 {% endhint %} 參考作法：( ) {% embed url="" %} ## 關於 FileReader 常見用法： ```javascript let reader = new FileReader(); // 用來讀取檔案的物件 reader.readAsDataURL(File); // 讀取檔案 // 檔案讀取完畢時觸發 reader.addEventListener("load", function () { // 可以透過 reader.result 取得圖片讀取完成時的 Base64 編碼格式 // ... other code ... }); ``` 關於 Base64 編碼： {% hint style="info" %} **Base64**可以用來將 binary 的位元組序列資料**編碼**成ASCII字元序列構成的文字。 使用時，在傳輸**編碼**方式中指定**Base64**。 使用的字元包括大小寫拉丁字母各26個、數字10個、加號 + 和斜槓 / ，共64個字元，等號 = 用來作為字尾用途。 {% endhint %} ## 練習 2：透過 FileReader 將圖片於網頁上預覽 一樣在 `file1.html` 網頁檔，繼續撰寫：(新增 CSS 及 ul 標籤) ```html File API ``` 試著寫出以下程式： * 這個 `type="file"` 是可以選擇多個檔案，所以有加 `multiple` 屬性。 * 將所選的圖，呈現預覽圖在 `ul.picture_list` 標籤裡。 * 如果重選，要先將 ul 標籤裡的東西清空，再顯示預覽圖。 ### 執行結果 選了檔案後的預覽結果，如下圖： ![](/files/-M1LvdcP8DNOsHSGa5Uf) {% hint style="info" %} 在 input 標籤上，可以加上 **`accept="image/*"`** 屬性，可限制使用者只能選擇圖檔相關。 {% endhint %} 參考作法( )： {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.webmix.cc/html5/7.-file-api/7.1-du-qu-dang-an.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.