javascript - 我的 HTML5/Javascript 代码不会多次执行相同的功能？

Question

我一直在对一小段代码进行故障排除，该代码旨在允许用户选择本地文件，将本地文件的文本内容输入到变量中，然后将变量值转储到文本区域中。

这一切都工作得很好，用户可以选择一个文件，然后在我的文本区域中查看该文件的内容。问题是，我有一个名为“ClearAll”的按钮，它会清除文本区域值。如果用户再次选择本地文件，则不会发生任何事情，并且本地文件内容永远不会填充文本区域。

综上所述，选择本地文件一次可以，但第二次就不行了。

这是我的代码:

<input type="file" id="files" name="file" /><br>
<script>
    function handleFileSelect(evt) {
        var files = document.getElementById('files').files;
        if (!files.length) {
          alert('Please select a file!');
          return;
        }
        var file = files[0];
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                document.getElementById('myInput').textContent = evt.target.result;
            }  
        };
        reader.readAsText(file, "UTF-8");
    }
document.getElementById('files').addEventListener('change', handleFileSelect, false);

...我还有一个按钮，只需将其值设置为 ="" 即可成功调用函数来清除文本区域。由于某种原因，文本区域填充只能工作一次。谁能明白这是为什么吗？

快速评论:我想也许如果我在激活 ClearAll 按钮时更改文件的内容，它可能会重置一些东西，但没有运气。

Answer 1

问题出在最后一行。当您选择相同的文件名时，事件更改不会触发两次。重命名该文件并查看它是否有效。