Filereader - 再次上傳相同的文件不起作用

我有像繪製應用程序。用戶可以保存項目並加載它們。當我第一次加載一個文件（例如project1.leds）在應用程序中進行一些更改但不保存它，然後再次加載相同的文件（project1.leds）時，什麼都不會發生。我不能一次加載同一個文件。如果我加載其他文件，它的工作。Filereader - 再次上傳相同的文件不起作用

代碼：

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

我可以刪除/刪除緩存文件？它甚至被緩存在瀏覽器中？

來源

2014-10-29 sko

它沒有被緩存，它只是選定的文件。您正在收聽更改事件。如果再次選擇相同的文件沒有任何變化，則不會觸發更改事件。閱讀完後你可以嘗試設置'e.target.files = null'或類似的東西。（順便說一句，它與上傳無關，你沒有上傳任何東西，只是在本地加載它，對吧？） – Winchestro 2014-10-29 16:28:47

是的，我在本地加載它。 'e.target.files = null'沒有幫助。 – sko 2014-10-29 17:03:04

這是因爲你正在調用onchange函數。如果您上傳相同的文件，則文件輸入的值與以前的上傳沒有變化，因此不會被觸發。這也解釋了爲什麼它可以在你上傳不同的文件時起作用。無需清除緩存，您可以通過在讀取文件後重置輸入字段的值來解決此問題。

$("#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 = ''; 
    } 
});

來源

2015-05-20 18:35:47 OldGreg

Just fyi，Chrome似乎沒有在第二次激發同一個文件的onload事件。 – Bon 2015-11-22 20:04:16

'$（「＃menu-open-file」）[0] .value ='';'作爲一種魅力。使用'Safari 9.1'和'Chrome 50'測試謝謝！ – Horacio 2016-05-28 18:19:38

非常好，效果很棒！ – 2016-10-04 17:43:18

上述答案的唯一問題是，上傳後您的HTML將不再顯示文件名。相反，它會繼續說「沒有選擇文件」，這可能會讓用戶感到困惑。

要解決這個問題，你可以隱藏輸入，並與複製輸入的顯示，像這樣的標籤替換：

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

很好地解釋了文章如何在這裏執行此操作：https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

來源

2016-06-19 04:44:02

Filereader - 再次上傳相同的文件不起作用

回答

相關問題