2

控えめなJavaScriptでHTML5ファイルAPIを使用したいと思います。しかし、HTMLからJavaScript関数を呼び出すことによってのみ機能させることができます。控えめなJavaScriptでFileAPIを使用する方法はありますか？

File APIはすべてのブラウザでサポートされているわけではありませんが、GoogleChromeと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>
4

2 に答える 2

7

試す：

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

ここでjsfiddle

于 2011-07-21T11:22:20.113 に答える
3

オンチェンジではありませんが、

input2.addEventListener('change', handleFiles);
于 2011-07-21T11:22:40.177 に答える