如何使用 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