html5输入类型文件浏览器的差异

时间:2014-11-27 11:35:23

标签: javascript html5 file input

我对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>

1 个答案:

答案 0 :(得分:0)

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 />