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 - 再次上传相同的文件不起作用

回答

相关问题