使用HTML输入重新加载文件

Question

我有一个文本区域，可以通过键盘输入进行编辑。我还想能够使用HTML输入加载文件。我已经使用onchange事件完成了这个功能（请查看下面的jsfiddle代码）。

假设我使用文件加载器加载了一个文件 - 在示例中正常工作。 然后，我编辑了这个文件。意识到所做的更改不是想要的，我想重新加载这个文件。但是，当使用HTML输入时，什么也没有发生，因为所选文件保持不变（onchange事件未触发）。是否有一种方法可以使用HTML输入重新加载文件？（我找到的唯一解决方法是加载不同的文件，然后重新加载原始文件...这不是非常优雅。） http://jsfiddle.net/aroberge/8PZyK/1/

var load_file = function() {
  $("#fileInput").show();
  var fileInput = document.getElementById('fileInput');
  fileInput.addEventListener('change', function(e) {
    var file = fileInput.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        $("#editor").text(reader.result);
        $("#fileInput").hide();
    };
    reader.readAsText(file);    
}); 
};

$("#load").on("click", function(evt) {
  load_file();
});

- André

---

您需要将文件保留在表单中，还是仅用于文本输入？ - LoveAndCoding

如果我理解你的问题正确，我只需要它用于文本输入。但请注意，下一次我可能想要加载不同的文件（对此上述方法有效），而不一定重新加载相同的文件 - 有时我确实需要这样做。 - André

Answer 1

在文件输入发生改变之后，当你获取数据后，只需要简单地重设输入字段即可：

fileInput.value = ""; // Or with jQuery, $('input[file]').val('')

这将触发另一个变化（你需要忽略它），但会允许用户再次选择同一个文件并仍然给你一个change事件。

- LoveAndCoding

---

我的理解是，所涉及的值（文件）是只读的。更改其他字段（例如值）似乎不会触发onchange事件。 - André

“value”是输入的实际值。在这种情况下，是文件（或文件名）。重置它应该触发事件。但是，因为您在代码中检查了“.files”，所以只需将其放在那里，您不应该有任何问题。 - LoveAndCoding

Answer 2

你可以在读取文件后清除fileInput的值：

更新的示例： http://jsfiddle.net/8PZyK/8/

var load_file = function() {
    $("#fileInput").show();
    var fileInput = document.getElementById('fileInput');
    fileInput.addEventListener('change', function(e) {
        if (fileInput.files && fileInput.files.length > 0) {
            var file = fileInput.files[0];
            var reader = new FileReader();
            fileInput.value = "";
            reader.onload = function(e) {
                $("#editor").val(reader.result);
                $("#fileInput").hide();
            }
        };
        reader.readAsText(file);    
    }); 
};

$("#load").on("click", function(evt) {
    load_file();
});

- Damon Smith

---

我刚刚尝试了一下，当我第二次加载文件（或任何其他文件）时，文本区域的内容不会改变 - 也就是说，新文件的内容不会被插入。编辑：只有在我手动编辑文本区域时才会出现这种情况。 - André

实际上，使用上述代码将 .text(reader.result) 改为 .val(reader.result) 似乎可以解决问题。 - André

真的吗？在哪个浏览器中？对我来说，在Chrome中，我可以加载一个文本文件并在您的文本区域中查看它，然后编辑该文件，再次加载它并查看文本文件的新内容。 - Damon Smith

我能够看到文件。问题在于：1）加载文件；2）手动更改文本区域的内容；3）重新加载文件-没有更新任何内容。但是将.text()更改为.val()似乎可以解决此问题。（编辑：.text()指的是我的原帖和此答案的第一个版本） - André

啊，我明白了，更改的是文本区域，而不是文件内容。好的，我已经更新答案，也使用了val。干得好。 - Damon Smith