为什么这个 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/