如何通过不显眼的 JavaScript 使用 HTML5 文件 API?
我想使用 HTML5 文件 API 和不显眼的 JavaScript。但我只能通过从 HTML 调用 JavaScript 函数来使其工作。有什么方法可以通过不显眼的 JavaScript 使用 File API 吗?
并非所有浏览器都支持文件 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>
I would like to use the HTML5 File API with unobtrusive JavaScript. But I can only get it working by calling JavaScript functions from the HTML. Is there any way to use the File API with unobtrusive JavaScript?
The File API is not supported by all browsers, but I have tried this in Google Chrome and in Firefox.
From the documentation this works:
<input type="file" id="input" onchange="handleFiles(this.files)">
And I have tried with this unobtrusive JavaScript that doesn't work:
window.onload = function() {
var input2 = document.getElementById('input2');
input2.addEventListener('onchange', handleFiles);
}
A complete example is below, and testable on 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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
尝试:
jsfiddle
Try:
jsfiddle here
不是 onchange 但是
not onchange but