<input> 標籤與 File物件

於網頁上配置一個 <input> 標籤，識別 id 設定為 myfile ，並且將其 type 屬性設定為 file 如下：

<input id="myfile" type="file" />

此時畫面上出現一個檔案選取功能控制項，使用者可以透過這個控制項選取任意檔案，而當使用者選取特定檔案的動作完成，會觸發一個 change 事件，選取的檔案會被包裝成 File 物件傳入，我們可以進一步透過這個物件，存取包含檔案名稱與容量大小等相關的檔案特性。考慮以下的程式片段：

function change_handler(){

     var file=this.files[0];

     // 透過存取檔案特性

}

這是 change 事件的回應函式，由於 <input> 標籤可以允許使用者選取一個以上的檔案，因此其回傳的內容是一個包含所有選取檔案的 FileList 陣列物件，可以透過 files 屬性取得此物件，而每一個選取的檔案被包裝成為 File 物件儲存於其中，這裏假設使用者只選取了一個檔案，因此僅取出其中的第一個 File 物件。
取得 File 物件之後，將其儲存至變數 file ，接下來就可以引用其相關的屬性取出與選取檔案有關的特性。

來看一個範例畫面：

使用者按一下畫面上的「選擇檔案」按鈕，開啟一個選取檔案的對話方塊，任意選取一個檔案之後，會顯示這個檔案的名稱。畫面的下半部則於控制台中顯示此檔案的相關特性。於網頁上配置一個 <input> 標籤如下：

<input id="cfile" type="file" />

建立一個函式 change_handler ，其中逐一取出指檔案的各種特性資訊：

function change_handler() {

    var file = this.files[0];

    console.log(

        '\n檔名：' + file.name, //檔案名稱

        '\n型態：' + file.type, //檔案型態

        '\n大小：' + file.size, //檔案大小

        '\n最後修改日期：' + file.lastModifiedDate); //最後修改日期

}

於網頁載入之後，註冊此 <input> 標籤的 change 事件其回應函式為 change_handler()：

window.onload = function () {

    document.getElementById('cfile').addEventListener(

'change', change_handler);

};

在這個範例中，我們看到了如何讓使用者選取一個指定的檔案，並取得其檔案特性，這是最簡單的外部檔案操作，接下來，就可以針對檔案的內容進行讀取了。

關於檔案的讀取，請參考利用 HTML5 的 FileReader 進行最簡單的文字檔讀取。

繼續閱讀…