<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 進行最簡單的文字檔讀取

沒有留言: