如何使用 HTML5 文件 API 和不显眼的 JavaScript？

Question

我想使用 HTML5文件 API和不显眼的 JavaScript。 但我只能通过从 HTML 调用 JavaScript 函数来使其工作。 有什么方法可以将文件 API 与不显眼的 JavaScript 一起使用？

并非所有浏览器都支持文件 API，但我已在 Google Chrome 和 Firefox 中尝试过此操作。

从文档中可以看出：

<input type="file" id="input" onchange="handleFiles(this.files)">

我已经尝试过这个不起眼的 JavaScript 不起作用：

window.onload = function() {
    var input2 = document.getElementById('input2');
    input2.addEventListener('onchange', handleFiles);
}

下面是一个完整的示例，可在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>

Answer 1

尝试：

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

jsfiddle在这里

Answer 2

不是onchange，而是

input2.addEventListener('change', handleFiles);

如何使用 HTML5 文件 API 和不显眼的 JavaScript？

问题描述

2 个解决方案

解决方案1
7 已采纳 2011-07-21 11:22:20

解决方案2
3 2011-07-21 11:22:40

如何使用 HTML5 文件 API 和不显眼的 JavaScript？

问题描述

2 个解决方案

解决方案1 7 已采纳 2011-07-21 11:22:20

解决方案2 3 2011-07-21 11:22:40

解决方案1
7 已采纳 2011-07-21 11:22:20

解决方案2
3 2011-07-21 11:22:40