Question

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

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

总而言之，选择一个本地文件一次有效，但第二次没有。

这是我的代码：

<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);

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

快速评论：我想如果我在激活ClearAll按钮时更改files的内容，可能会重置一些内容，但没有运气。

Answer 1

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

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

1 个答案: