HTML5之文件API

問題很簡單，做個上傳文件的頁面。

    <!-- multiple代表可上傳多個文件 -->
    <input type="file" id="file" multiple/>
    <input type="button" id="btn" value="上傳" />

html頁面中簡單兩行代碼就完成基本的文件上傳頁面。如下圖。解決。

/***************************分割線********************/

此時又來了一個新問題：如何獲取用戶上傳的這個文件的文件名、文件大小、文件類型?

var btn = document.getElementById("btn"),
    file = document.getElementById("file"),
    fileSize = document.getElementById("fileSize"),
    fileType = document.getElementById("fileType");

btn.onclick = function() {
    fileSize.innerHTML = file.files[0].size;　　//files是一個數組，指的是第一個文件。
    fileType.innerHTML = file.files[0].type;　　//獲取文件名是file.files[0].type
};

效果如下圖。解決

這個files就是一個文件集合的數組。他包含四個對象，分別是

• name:該文件的文件名
• size:文件的位元組大小。註意是位元組。[1kb==1024b(位元組),1b == 8bit(比特),1Mb == 1024kb]
• type:文件的類型。（text/html、image/png）
• lastModifiedDate:字元串，文件上一次被修改的時間。（目前只有Chrome支持）

/***************************分割線***************************/

此時又來一個新問題，用戶上傳了一張圖片，並想預覽一下？

這裡引入一個新類型FileReader。類似於XMLHttpRequest。

這個類型下有5個對象，分別是

readAsText(file,encoding)：以純文本形式（text）讀取文件，將讀取到的文本保存在 result 屬性中。第二個參數用於指定編碼類型，是可選的。

readAsDataURL(file)：讀取文件並將文件以數據 URI 的形式(圖片)保存在 result 屬性中。

readAsBinaryString(file)：讀取文件並將一個字元串保存在 result 屬性中，字元串中每個字元表示一位元組。

readAsArrayBuffer(file)：讀取文件並將一個包含文件內容的 ArrayBuffer 保存在result 屬性中。

abort(): 中斷讀取文件

還有6個方法，分別是：

onabort 中斷觸發
onerror 錯誤觸發
onprogress 讀取中觸發
onload 成功讀取後觸發
onloadend 無論失敗或成功後觸發

回歸正題。

var btn = document.getElementById("btn"),
    file = document.getElementById("file"),
    fileSize = document.getElementById("fileSize"),
    fileType = document.getElementById("fileType"),
    show = document.getElementById("show");
btn.onclick = function() {
    // fileSize.innerHTML = file.files[0].size;
    // fileType.innerHTML = file.files[0].type;
    var reader = new FileReader();　　　　//先new一個對象。
    reader.readAsDataURL(file.files[0]); //重要的一步，獲取圖片內容，圖片的內容會保存在reader.result中
    reader.onload = function(){
        show.innerHTML = '<img src="'+ reader.result + '" alt="這是圖片"/>';//頁面顯示
    }
};

    <!-- multiple代表可上傳多個文件 -->
    <input type="file" id="file" multiple/>
    <input type="button" id="btn" value="上傳" />
    <br/>
    <!-- <span>文件大小：</span><span id="fileSize"></span><br/>
    <span>文件類型：</span><span id="fileType"></span><br/> -->
    <div id="show">
    </div>

真好看。

同理，還可以讀取text文本，n進位文件等。。