使用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

从文件中读取文件输入后，可以清除它：

更新的提琴： 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();
});

Answer 2

文件输入更改后，您获取了数据，只需重置输入字段即可，如下所示：

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

这将触发另一个更改（您将要忽略），但将允许用户再次选择相同的文件，并且仍然为您提供change事件。