Filereader - prześlij ponownie ten sam plik

Question

Mam coś takiego jak aplikacja do rysowania. Użytkownik może zapisywać projekty, a następnie je ładować. Kiedy ładuję po raz pierwszy jeden plik (np. Project1.led) wprowadzam pewne zmiany w aplikacji, ale nie zapisuję, a następnie ponownie ładuję ten sam plik (project1.leds) nic się nie dzieje. Nie mogę załadować tego samego pliku więcej niż jeden raz. Jeśli załaduję inny plik, jego działanie.

Kod:

$("#menu-open-file").change(function(e){ 
    var data=[]; 

    var file = null; 
    file = e.target.files[0]; 
    console.log(file) 
    var reader = new FileReader(); 
     reader.onload = function(e){ 
      data=JSON.parse(reader.result); 
      x=data[0].SIZE[0]; 
      y=data[0].SIZE[1]; 
      if(x==15) x=16; 
      if(x==30) x=32; 
      if(x==60) x=64; 
      if(y==15) y=16; 
      if(y==30) y=32; 
      if(y==60) y=64; 
      createLeds(x,y,data,false,false); 
      clearActiveTools(); 
      var svg = $('#contener').find('svg')[0]; 
       svg.setAttribute('viewBox','0 0 ' + x*20 + ' ' + y*20); 
      $("#contener").css("width",x*20).css("height",y*20); 
      $("#contener").resizable({ 
       aspectRatio: x/y, 
       minHeight: 200, 
       minWidth: 200, 
      }); 
      wiFirst = $("#contener").width(); 
      hiFirst = $("#contener").height(); 
     } 
     reader.readAsText(file); 
}); 

mogę usunąć/usunąć plik pamięci podręcznej? Czy jest nawet buforowany w przeglądarce?

Answer 1

To dlatego, że wywołujesz funkcję onchange. Jeśli prześlesz ten sam plik, wartość pliku wejściowego nie zmieniła się od poprzedniego przesłania, a zatem nie zostanie uruchomiona. Wyjaśnia to również, dlaczego działa po przesłaniu innego pliku. Nie ma potrzeby czyszczenia pamięci podręcznej, możesz obejść to, resetując wartość pola wejściowego po przeczytaniu pliku.

$("#menu-open-file").change(function(e){ 
    var data=[]; 

    var file = null; 
    file = e.target.files[0]; 
    if(file !== ''){ 
     console.log(file) 
     var reader = new FileReader(); 
     reader.onload = function(e){ 
      data=JSON.parse(reader.result); 
      x=data[0].SIZE[0]; 
      y=data[0].SIZE[1]; 
      if(x==15) x=16; 
      if(x==30) x=32; 
      if(x==60) x=64; 
      if(y==15) y=16; 
      if(y==30) y=32; 
      if(y==60) y=64; 
      createLeds(x,y,data,false,false); 
      clearActiveTools(); 
      var svg = $('#contener').find('svg')[0]; 
       svg.setAttribute('viewBox','0 0 ' + x*20 + ' ' + y*20); 
      $("#contener").css("width",x*20).css("height",y*20); 
      $("#contener").resizable({ 
       aspectRatio: x/y, 
       minHeight: 200, 
       minWidth: 200, 
      }); 
      wiFirst = $("#contener").width(); 
      hiFirst = $("#contener").height(); 
     } 
     reader.readAsText(file); 
     $("#menu-open-file")[0].value = ''; 
    } 
}); 

Answer 2

Jedynym problemem z powyższą odpowiedzią jest to, że HTML nie będzie wyświetlał nazwy pliku po przesłaniu. Zamiast tego będzie nadal mówić "Nie wybrano pliku", co może być mylące dla użytkowników.

Aby obejść ten problem, można ukryć wejście i wymienić go na etykiecie, że replikuje wyświetlanie wejściu, tak:

HTML:

<input type="file" id="myFileInput" /> 
<label id="myFileLabel" for="myFileInput">Choose file</label><span id="myFileName">No file chosen</span> 

CSS:

#myFileInput { 
    display: none; 
} 
#myFileLabel { 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 12px; 
    margin-top: 5px;   
    padding-left: 6px; 
    padding-right: 6px; 
} 
#myFileName { 
    margin-left: 5px; 
} 

JavaScript:

var file = null 
file = e.target.files[0]; 

//variable to get the name of the uploaded file 
var fileName = file.name; 
//replace "No file chosen" with the new file name 
$('#myFileName').html(fileName); 

dobrze wyjaśniony artykuł jak to zrobić tutaj: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/