关于html5中文件api 在chrome 和firefox中的不同表现？

Question

问题描述

在使用html5中文件api的时候 ，发现在chrome无法正确获取到选中的文件 而firefox可以

代码如下
html

    <input type="file" id="file" multiple>
    <input type="button"  value="显示文件信息" id="btn">

js

    var file = document.getElementById('file');    
        var oBtn = document.getElementById('btn');
        var files = file.files;

        oBtn.onclick = function  () {
            console.log(files,files.length);
        };

测试
chrome

firefox

大家有遇到上面的情况吗？是什么原因造成的，html5的文件api在chrome中应该兼容的呀

Answer 1

我測試了一下，兩個瀏覽器的實作有一點差別。在 Firefox 中，選取檔案會改變 file.files 這個陣列的內容，而在 Chrome 中，則是新建一個陣列然後整個取代原來的 file.files 物件。也就是說，你之前執行的：

var files = file.files;

僅僅保存了舊的對象，選擇文件後不會得到新的對象。

這現象可以透過選擇文件後比較 files === file.files 來驗證。

解決方法也很簡單，不要保存 files，每次都透過 file.files 取得。

Answer 2

我本地測試，chrome可以取得文件，你是不是先觸發了button的click？

Answer 3

file['files']

如果還不行，試試 jQuery, $(file).prop('files')，看看能不能

Answer 4

確實是有不同的表現，針對於這種情況的，通常是用模擬的方式去解決這樣的問題！