javascript - Reloading a file using html input - Stack Overflow

admin管理员组

文章数量:1334927

I have a textarea that can, quite obviously, be edited using keyboard entry. I also want to be able to load a file using an html input. I have done so, using the onchange event. (jsfiddle code linked below).

Suppose I load a file using the file loader - which works correctly in the example. Then, I edit this file. Realising that the changes I have made are not desired, I want to reload this file. However, when using the html input, nothing changes since the selected file remains the same (the onchange event is not triggered). Is there a way to reload a file using an html input. (The only workaround I have found is to load a different file, then reload the original file ... which is not very elegant).

/

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

I have a textarea that can, quite obviously, be edited using keyboard entry. I also want to be able to load a file using an html input. I have done so, using the onchange event. (jsfiddle code linked below).

Suppose I load a file using the file loader - which works correctly in the example. Then, I edit this file. Realising that the changes I have made are not desired, I want to reload this file. However, when using the html input, nothing changes since the selected file remains the same (the onchange event is not triggered). Is there a way to reload a file using an html input. (The only workaround I have found is to load a different file, then reload the original file ... which is not very elegant).

http://jsfiddle/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();
});

• javascript
• jquery
• html
• input

Share Improve this question Follow asked Mar 21, 2014 at 1:46 AndréAndré 1,02411 gold badge1212 silver badges2424 bronze badges 2

• Do you need to keep the file around in the form, or is it only used for the text input? – LoveAndCoding Commented Mar 21, 2014 at 1:54
• If I understand correctly your question, I only need it for text input. Note however that I could want to load a different file next time (for which the above just works), and not necessarily reload the same one - which I do need sometimes. – André Commented Mar 21, 2014 at 1:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You could clear out the fileInput value after you've read the file from it:

updated fiddle: http://jsfiddle/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();
});

After the file input has changed, and you grab out the data, simple reset the input field like so:

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

This will trigger another change (which you'll want to ignore), but will allow the user to select the same file again and still give you a change event.

本文标签： javascriptReloading a file using html inputStack Overflow