在HTML5以前，HTML的檔案上傳域的功能具有很大的侷限性，這種侷限性主要體現在如下兩點：

• 每次只能選擇一個檔案進行上傳
• 客戶端程式碼只能獲取被上傳檔案的檔案路徑，無法訪問實際的檔案內容

一、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屬性來過濾檔案型別，因為這只是客戶端的檔案型別過濾，這種檔案型別過濾是很脆弱的，如果開發者需要進行檔案上傳，則必須在伺服器端對檔案型別進行過濾。

二、使用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>