HTML5 输入类型文件浏览器差异

html5 input type file browser differences

本文关键字：浏览器 文件 输入 类型 HTML5      更新时间：2023-09-26

我在使用Firefox和IE11时遇到了一个问题，这似乎很奇怪。我想使用输入类型=文件来获取文件列表，它在 chrome 和 Safari 中工作，该值返回文件名，但 fileList 在 FireFox 和 IE 中为空

这是 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>

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) );
}
此外，如果需要

多个图像，则需要在文件输入上指定"multi"属性。

<input type="file" id="file1" onchange="file1_click();" multiple />
相关文章：