於網頁上配置一個 <input> 標籤,識別 id 設定為 myfile ,並且將其 type 屬性設定為 file 如下:
此時畫面上出現一個檔案選取功能控制項,使用者可以透過這個控制項選取任意檔案,而當使用者選取特定檔案的動作完成,會觸發一個 change 事件,選取的檔案會被包裝成 File 物件傳入,我們可以進一步透過這個物件,存取包含檔案名稱與容量大小等相關的檔案特性。考慮以下的程式片段:
這是 change 事件的回應函式,由於 <input> 標籤可以允許使用者選取一個以上的檔案,因此其回傳的內容是一個包含所有選取檔案的 FileList 陣列物件,可以透過 files 屬性取得此物件,而每一個選取的檔案被包裝成為 File 物件儲存於其中,這裏假設使用者只選取了一個檔案,因此僅取出其中的第一個 File 物件。
取得 File 物件之後,將其儲存至變數 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> 標籤如下:
建立一個函式 change_handler ,其中逐一取出指檔案的各種特性資訊:
於網頁載入之後,註冊此 <input> 標籤的 change 事件其回應函式為 change_handler():
在這個範例中,我們看到了如何讓使用者選取一個指定的檔案,並取得其檔案特性,這是最簡單的外部檔案操作,接下來,就可以針對檔案的內容進行讀取了。
關於檔案的讀取,請參考利用 HTML5 的 FileReader 進行最簡單的文字檔讀取。
使用者按一下畫面上的「選擇檔案」按鈕,開啟一個選取檔案的對話方塊,任意選取一個檔案之後,會顯示這個檔案的名稱。畫面的下半部則於控制台中顯示此檔案的相關特性。於網頁上配置一個 <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 進行最簡單的文字檔讀取。
沒有留言:
張貼留言