Filereader - 再次上传相同的文件无法正常工作

Question

我有点像绘图应用程序.用户可以保存项目然后加载它们.当我第一次加载一个文件(例如project1.leds)在应用程序中进行一些更改但没有保存它然后再次加载相同的文件(project1.leds)没有任何反应.我不能多次加载同一个文件.如果我加载其他文件,它的工作.

码:

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

我可以删除/删除缓存文件吗？它甚至在浏览器中缓存了吗？

Answer 1

这是因为你正在调用函数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 = '';
  }
});

Answer 2

因为输入正在缓存相同的文件值，所以当您再次加载相同的文件时，它使用缓存来读取值属性。您需要做的就是在使用 input 元素时设置条件语句并将 input 的 value 属性设置为空字符串，它应该可以工作

input.value = "";

如果您使用的是事件处理程序，那么

e.target.value = "";

Answer 3

尝试下面的代码，它应该可以工作。单击上传按钮时清除现有值。

$("#menu-open-file").click(function(e){ 
  $('#menu-open-file').val(''); 
}