HTML5文件操做-文件上傳（上）

時間 2019-11-10

標籤 html5 html 文件上傳欄目 HTML5 简体版

原文原文鏈接

js要操做文件，首先得講到的是文件api裏常見的幾個對象：api
```
1，Blob
2，File
3，FileList
4，FileReader
```
1.1 Blob對象表示的是二進制數據，提供了一個slice方法，該方法能夠訪問到字節內部的數據段（也就是整個數據的某一段數據）服務器

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

<input type="file" id="file" name="">
<input type="button" name="" value="上傳" id="button">
    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);

如圖：
url

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

<input type="file" id="file" name="" multiple="multiple">
 <input type="button" name="" value="上傳" id="button">

如圖：
code

這時看文字顯示：
如圖：
對象

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

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 += "<img src='"+ reader.result + "'/>"
        }

    }

結果如圖：

1.4.3 readAsText()方法的用法：

代碼：

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

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

結果：