HTML5 文件域+FileReader 讀取文件(一)

 在HTML5之前，HTML的文件上傳域的功能具備很大的侷限性，這種侷限性主要體如今以下兩點：

• 每次只能選擇一個文件進行上傳
• 客戶端代碼只能獲取被上傳文件的文件路徑，沒法訪問實際的文件內容

1、FileList對象和File對象

HTML5爲type='file' 的<input/>元素增長了兩個屬性。

• accept:該屬性控制容許上傳的文件類型。該屬性爲一個或多個MIME類型字符串。多個MIME類型字符串之間應以都好分割。
• multiple：該屬性設置是否容許選擇多個文件

JavaScript能夠經過files屬性訪問type='file'的<input/>元素生成的文件上傳域的全部文件，該屬性返回一個FileList對象，FileList對象至關於一個數組，開發者可使用相似於數組的方法來訪問該數組內的每一個File對象。

  File對象是一個JavaScript對象，能夠經過該對象獲取瀏覽器的全部文件信息。File對象包含以下屬性。

• name:返回該File對象對應的文件的文件名， 不包括文件路徑部分
• type：返回該File對象的文件的MIME類型字符串。
• size：返回該File對象的對應的文件的大小，字節單位

實例：

   預覽圖片：
        <input id="images" type="file" multiple accept="image/*" />
        <script type="text/javascript">
            var imgInput = document.getElementById('images');
            imgInput.onchange = function () {
                //1.獲取全部選中文件列表
                var fileList = imgInput.files;
                //2.遍歷顯示信息
                for (var i = 0; i < fileList.length; i++) {
                    var file = fileList[i];
                    //一次讀取文件的文件名，文件類型，文件大小
                    var div = document.createElement('div');
                    div.innerHTML = "第" + (i + 1) + "個文件的文件名：" +
                        file.name
                        + ",文件類型：" + file.type
                        + "，文件大小：" + file.size;
                    //添加到 body中
                    document.body.appendChild(div);
                }
            }
        </script>

顯示結果：

提示：該文件選擇框設置了accept='image/*'只顯示圖片。

不要靠accept屬性來過濾文件類型，由於這只是客戶端的文件類型過濾，這種文件類型過濾是很脆弱的，若是開發者須要進行文件上傳，則必須在服務器端對文件類型進行過濾。

2、使用FileReader讀取文件內容

 FileReader一樣是一個JavaScript對象，開發者能夠經過該對象在客戶端讀取 文件上傳域所選擇的文件內容.關於FileReader

實例1：

<div>
    讀取文本文件：  <input type="file" id="file1" />
</div>
<div>
    讀取爲二進制：  <input type="file" id="file2" />
</div>
<div>
    讀取爲DataURL： <input type="file" id="file3" accept="*" />
</div>
<p id="result" style="width:100%;word-break:break-all;word-wrap:break-word;"></p>
<script type="text/javascript">
        //判斷瀏覽器是否支持FileReader對象
        var reader
        if (FileReader) {
            reader = new FileReader();
        } else {
            alert('您的瀏覽器不支持FileReader對象');
        }
        //1.讀取爲文本
        var file1 = document.getElementById('file1');
        file1.onchange = function () {
            var file = file1.files[0];
            //判斷讀取的第一個文件是不是文本文件
            if (/text\/\w+/.test(file.type)) {
                //以文本的方式讀取內容
                reader.readAsText(file, 'gbk');
                reader.onload = function () {
                    document.getElementById('result').innerHTML = reader.result;
                }
            } else {
                alert('讀取的不是文本文件');
            }
        }
        //2.讀取爲二級制
        var file2 = document.getElementById('file2');
        file2.onchange = function () {
            var file = file2.files[0];
            //以二進制流的方式讀取第一個文件
            //reader.readAsArrayBuffer(file);  //返回二進制數組
            reader.readAsBinaryString(file);   //返回二進制字符串
            reader.onload = function () {
                document.getElementById('result').innerHTML = reader.result;
            }
        }
        //3.讀取爲DataURL
        var file3 = document.getElementById('file3');
        file3.onchange = function () {
            var file = file3.files[0];
            reader.readAsDataURL(file);
            reader.onload = function () {
                document.getElementById('result').innerHTML = reader.result;
            }
        }
</script>

 

FileReader在讀取文件的過程當中可能屢次觸發onprogress事件，經過該事件綁定監聽器便可實時監控文件的讀取進度。

提示：FileReader只是客戶端的JavaScript對象，使用FileReader所進行的上傳也只是把磁盤上的文件讀取到瀏覽器內存中，並未真正上傳到服務器。若是須要真正把客戶端文件上傳到服務器，則可把文件數據以POST請求方式提交到遠程服務器，遠程服務器負責接收文件數據，並把數據內容保存到服務器。

實例2：

<div>
    讀取二進制文件：
    <input type="file" id="file1" accept="*" />
</div>
<div>
    顯示進度：
    <progress id="pro" value="0"></progress>
</div>
<div id="result"></div>
<script type="text/javascript">
        var file1 = document.getElementById('file1');
        file1.onchange = function () {
            var file = file1.files[0];
            //讀取爲二進制
            var reader = new FileReader();
            reader.readAsBinaryString(file);
            //顯示進度
            var pro = document.getElementById('pro');
            pro.max = file.size;
            pro.value = 0;
            reader.onprogress = function (e) {
                pro.value = e.loaded;
            }
            reader.onload = function () {
                document.getElementById('result').innerHTML = reader.result;
            }
        }
</script>