如何在不引人注目的JavaScript中使用HTML5 File API?

Jon*_*nas 2 javascript html5 file unobtrusive-javascript fileapi

我想将HTML5 文件API与不引人注目的JavaScript一起使用.但我只能通过从HTML调用JavaScript函数来实现它.有没有办法使用不引人注目的JavaScript的文件API?

并非所有浏览器都支持File API,但我已在Google Chrome和Firefox中尝试过此操作.

从文档中可以看出:

<input type="file" id="input" onchange="handleFiles(this.files)">
Run Code Online (Sandbox Code Playgroud)

我尝试过这种不起作用的JavaScript不起作用:

window.onload = function() {
    var input2 = document.getElementById('input2');
    input2.addEventListener('onchange', handleFiles);
}
Run Code Online (Sandbox Code Playgroud)

下面是一个完整的例子,可以在jsFiddle测试.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload = function() {
    var input2 = document.getElementById('input2');
    input2.addEventListener('onchange', handleFiles);
}

function handleFiles(e) {
    alert('got files');
}
</script>
</head>
<body>
<h1>Test</h1>
<input type="file" id="input1" onchange="handleFiles(this.files)"/>
<input type="file" id="input2"/>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Koo*_*Inc 7

尝试:

window.onload = function() {
    var input2 = document.getElementById('input2');
    input2.addEventListener('change', handleFiles,false);
    //                       ^not onchange        ^older firefox needs this
}
Run Code Online (Sandbox Code Playgroud)

jsfiddle在这里