如何通过不显眼的 JavaScript 使用 HTML5 文件 API?

发布于 2024-11-25 07:44:31 字数 1216 浏览 2 评论 0原文

我想使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

薄荷港 2024-12-02 07:44:32

尝试:

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

jsfiddle

Try:

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

jsfiddle here

一身仙ぐ女味 2024-12-02 07:44:32

不是 onchange 但是

input2.addEventListener('change', handleFiles);

not onchange but

input2.addEventListener('change', handleFiles);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文