关于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

确实是有不同的表现，针对于这种情况的，通常是用模拟的方式去解决这样的问题！