html5输入类型文件浏览器区别答案

【问题标题】：html5 input type file browser differenceshtml5输入类型文件浏览器区别
【发布时间】：2014-11-27 11:35:23
【问题描述】：

我在 Firefox 和 IE11 上遇到了一个看起来很奇怪的问题。我想使用 input type=file 来获取一个fileList，它在chrome和Safari中工作，该值返回文件名，但在FireFox和IE中fileList为空

这里是html，把它放在一个文件中然后用浏览器打开，或者放在一个网站上然后加载页面。

<html>
<head>
<title>input file test</title>
<script>
function file1_click(){
"use strict";    
var f = document.getElementById('file1');
alert('value=' + f.value + '\nfiles=' + JSON.stringify(f.files) );
}   
</script>
</head>
<body>
<form id="form1">
<input type="file" id="file1" onchange="file1_click();" /> 
</form>
</body>
</html>

【问题讨论】：

它在 Firefox 中工作得很好，但它返回一个本机 fileList 对象，而 stringify 只是返回不同的结果，如果您尝试使用 console.log( f.files[0] ) 实际记录文件，您会看到文件在那里。

标签： javascript html file input

【解决方案1】：

f.files 是一个对象。你可以循环遍历它。

function file1_click(){
    "use strict";    
    var f = document.getElementById('file1');
    var filesArray = [];
    for(var i=0, len=f.files.length; i<len; i++) {
        filesArray.push(f.files[i]['name'])
    }
    alert('value=' + f.value + '\nfiles=' + JSON.stringify(filesArray) );
}

此外，如果您需要多个图像，则需要在文件输入中指定“multiple”属性。

<input type="file" id="file1" onchange="file1_click();" multiple />

【讨论】：