摘要：最后一次修改文件的時間。選擇文件代碼上傳如圖這時看文字顯示如圖此時我們在獲得對象時，不能用這種方式獲取文件對象了不然只獲取的是對象集合里面的一個對象。

js要操作文件，首先得講到的是文件api里常見的幾個對象：

1，Blob
2，File
3，FileList
4，FileReader

1.1 Blob對象表示的是二進制數據，提供了一個slice方法，該方法可以訪問到字節內部的數據段（也就是整個數據的某一段數據）

1.2 File對象，File對象是從Blob對象繼承過來的，表示的是一個具體的文件，有兩個屬性，name,文件的名字，不包括路徑。lastModifiedDate,最后一次修改文件的時間。當然，從Bolb繼承下來的，Blob有的，File也有。
代碼：

    window.onload = function() {
    var file = document.getElementById("file");
    var button = document.getElementById("button");
    var ofile = null;


    button.onclick = function() {
        //用戶還沒有點擊“選擇文件”把文件添加進input里（input里為空）
        //而直接點擊了上傳按鈕，就讓它退出
        if (file.files.length == 0) {
            console.log("請選擇文件");
            return false;
        }
        //這里只選擇了一個文件
        ofile = file.files[0]; 
        console.log(ofile);
    }
}

如圖：

通過File來找size,type,lastModifiedDate
代碼：

console.log(ofile.size + "-" + ofile.type + "-" + ofile.lastModifiedDate);

如圖：

1.3 FileList對象表示的是一個文件file對象的集合,當我們用h5的多文件上傳時，首先得要在type="file"的input元素里添加multiple屬性，multiple="multiple",可允許用戶選擇多個文件,具體操作按住Ctrl繼續選擇多個文件，選擇好之后，點擊完成，比如你選了3個文件，這時，FileList對象里就存有3個不同的file對象，每個不同的小File對象里面保存著該圖片的信息。
選擇3文件
代碼：

如圖：

這時看文字顯示：
如圖：

此時,我們在獲得file對象時，不能用files[i]這種方式獲取文件對象了（files[i//0,1,2]）,不然只獲取的是對象集合里面的一個file對象。所以，我們要把files的[]去掉。ofile = file.files; 這樣獲取的就是一個文件列表，然后我們循環遍歷每個對象看看其內容：
代碼：

    button.onclick = function() {
        //用戶還沒有點擊“選擇文件”把文件添加進input里（input里為空）
        //而直接點擊了上傳按鈕，就讓它退出
        if (file.files.length == 0) {
            console.log("請選擇文件");
            return false;
        }
        //這里只選擇了一個存有文件對象的文件列表，該列表具有長度length
        ofile = file.files;
        console.log(ofile.length);//3
        console.log("------------------------")
        //遍歷每個file對象
        for (var i = 0; i < ofile.length; i++) {
            console.log(ofile[i]);
        }     
    }

結果如圖： 每個file對象的內容

1.4 FileReader 對象用來讀取文件中的數據，異步的方式讀取文件保存到內存中，并賦值給JavaScript的變量
FileReader里的四個讀取文件的方法：

    1，readAsBinaryString();該方法把讀取到的文件數據以二進制的形式保存到result屬性里面，參數為一個Bolb對象。
    2，readAsDataURL();該方法會把該圖片讀成一個url保存到result里，也就是說可以把這個圖片的結果作為img的src屬性使用，就能顯示出該圖片
    3，readAsText();該方法是按某種編碼來讀取文件，第一個參數為Blob對象，第二個參數為編碼方式，
    4，abort();中斷文件讀取。
FileReader里的事件：
    1,onloadstart 讀取文件時開始觸發；
    2,onprogress 讀取文件的過程中觸發；
    3，onload 讀取成功時觸發；
    4，onabort 讀取中斷時觸發
    5，onerror 讀取錯誤時觸發
    6，onloadend 讀取完成后觸發 （無論成功與否）

1.4.1 readAsBinaryString()
在使用這些方法之前，先要搞個對象出來，var reader = new FileReader();創建完對象之后，直接調用該對象上的方法：reader.readAsBinaryString(ofile);把要讀取的文件對象放進去讀取結果在result里面，reader.result;
看代碼：

button.onclick = function() {
//用戶還沒有點擊“選擇文件”把文件添加進input里（input里為空）
//而直接點擊了上傳按鈕，就讓它退出
        if (file.files.length == 0) {
            console.log("請選擇文件");
            return false;
        }
        //這里只選擇了一個存有文件對象的文件列表，該列表具有長度length
        ofile = file.files[0];

        var reader = new FileReader();//創建一個讀取文件對象reader
        
        reader.readAsBinaryString(ofile);

        reader.onload = function() {//文件讀取成功后 打印出數據結果，
            console.log(reader.result);
        }
    }

看圖片：

1.4.2 readAsDataURL()方法：

直接看代碼：

    button.onclick = function() {
        //用戶還沒有點擊“選擇文件”把文件添加進input里（input里為空）
        //而直接點擊了上傳按鈕，就讓它退出
        if (file.files.length == 0) {
            console.log("請選擇文件");
            return false;
        }
        //這里只選擇了一個存有文件對象的文件列表，該列表具有長度length
        ofile = file.files[0];

        var reader = new FileReader();//創建一個讀取文件對象reader
        
        reader.readAsDataURL(ofile);

        reader.onload = function() {//文件讀取成功后 打印出數據結果，
            document.body.innerHTML += ""
        }

    }

結果如圖：

1.4.3 readAsText()方法的用法：

代碼：

reader.readAsText(ofile, "UTF-8");//默認utf-8;

        reader.onload = function() {//文件讀取成功后 打印出數據結果，
            console.log(reader.result);
        }

結果：

以上就是我對js文件API的學習及理解，筆者技術水平有限，期待對js文件API的更進一步了解，筆者將會堅持寫HTML5文件操作-文件上傳（中），拖拽上傳，（下），上傳文件至服務器。
待續。。。

列表項目