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

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

1，Blob
2，F(xiàn)ile
3，F(xiàn)ileList
4，F(xiàn)ileReader

1.1 Blob對象表示的是二進(jìn)制數(shù)據(jù)，提供了一個(gè)slice方法，該方法可以訪問到字節(jié)內(nèi)部的數(shù)據(jù)段（也就是整個(gè)數(shù)據(jù)的某一段數(shù)據(jù)）

1.2 File對象，F(xiàn)ile對象是從Blob對象繼承過來的，表示的是一個(gè)具體的文件，有兩個(gè)屬性，name,文件的名字，不包括路徑。lastModifiedDate,最后一次修改文件的時(shí)間。當(dāng)然，從Bolb繼承下來的，Blob有的，F(xiàn)ile也有。
代碼：

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


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

如圖：

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

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

如圖：

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

如圖：

這時(shí)看文字顯示：
如圖：

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

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

結(jié)果如圖： 每個(gè)file對象的內(nèi)容

1.4 FileReader 對象用來讀取文件中的數(shù)據(jù)，異步的方式讀取文件保存到內(nèi)存中，并賦值給JavaScript的變量
FileReader里的四個(gè)讀取文件的方法：

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

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

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

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

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

看圖片：

1.4.2 readAsDataURL()方法：

直接看代碼：

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

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

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

    }

結(jié)果如圖：

1.4.3 readAsText()方法的用法：

代碼：

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

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

結(jié)果：

以上就是我對js文件API的學(xué)習(xí)及理解，筆者技術(shù)水平有限，期待對js文件API的更進(jìn)一步了解，筆者將會堅(jiān)持寫HTML5文件操作-文件上傳（中），拖拽上傳，（下），上傳文件至服務(wù)器。
待續(xù)。。。

列表項(xiàng)目