javascript - 使用 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();
});

Answer 1

您可以在从中读取文件后清除 fileInput 值:

更新的 fiddle : 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();
});