Question

为什么这个JavaScript找不到id =＆＃34; filesToUpload＆＃34;的输入元素？在它下面的HTML中，除了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>

如下所述，该文档还没有准备好。 Per Martin Carney，这个简单的包装器可以解决问题（如果没有解释为什么它在jsfiddle中没有jQuery的情况下工作）：

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

Answer 1

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

简单的方法：

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

为什么没有找到Element，除了jsfiddle？

1 个答案: