gpt4 book ai didi

javascript - 为什么没有找到元素,除了在 jsfiddle 中?

转载 作者:行者123 更新时间:2023-12-02 16:12:08 25 4
gpt4 key购买 nike

为什么这个 JavaScript 无法在其下面的 HTML 中找到 id="filesToUpload"的输入元素,除了 jsfiddle 中?在jsfiddle中,此代码提供了选择多个图像文件的功能,并列出了所选的图像文件。它在 IE、FF 和 Chrome 中失败,除非在 jsfiddle 中运行。

function fileSelect(evt) {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var files = evt.target.files;
var result = '';
var file;

for (var i = 0; i < files.length; i++) {
result += '<li>' + files[i].name + ' ' + files[i].size + ' bytes</li>';
}

document.getElementById('filesInfo').innerHTML = '<ul>' + result + '</ul>';
} else {
alert('The File APIs are not fully supported in this browser.');
}
}

document.getElementById('filesToUpload').addEventListener('change', fileSelect, false);

HTML:

<body>
<form enctype="multipart/form-data" method="post" action="upload.php">
<div class="row">
<label for="fileToUpload">Select Files to Upload</label>
<br />
<br />
<input type="file" id="filesToUpload" multiple="multiple" />
<br />
<output id="filesInfo"></output>
</div>
<div class="row">
<br />
<input type="submit" value="Upload" />
</div>
</form>
</body>

正如下面评论的那样,该文档尚未准备好。根据 Martin Carney 的说法,这个简单的包装器就可以解决问题(如果不能解释为什么它在 jsfiddle 中没有 jQuery 的情况下也能工作):

$(document).ready(function() {
document.getElementById('filesToUpload').addEventListener('change', fileSelect, false);
});

最佳答案

尝试等待文档准备好后再运行document.getElementById('filesToUpload')。 。 ..

简单的方法:

$(document).ready(function() {
document.getElementById('filesToUpload').addEventListener('change', fileSelect, false);
});

关于javascript - 为什么没有找到元素,除了在 jsfiddle 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30061822/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com