Filereader - 再次上传相同的文件不起作用 [英] Filereader - upload same file again not working

问题描述

我有像绘图应用程序。用户可以保存项目，然后加载它们。当我第一次加载一个文件（例如project1.leds）在应用程序中做一些更改，但不保存它，然后再次加载相同的文件（project1.leds）没有发生。我不能一次加载相同的文件。如果我加载其他文件，它的工作。

代码：

  
 $（＃menu-open-file）。change（function（e）{
 var data = []; 
 
 var file = null; 
 file = e。 target.files [0]; 
 console.log（文件）
 var reader = new FileReader（）; 
 reader.onload = function（e）{
 data = JSON。解析（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; $ b $ （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）; 
}）; 
  

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

解决方案

这是因为你正在调用函数onchange。如果您上传相同的文件，则文件输入的值与上次上载没有变化，因此不会被触发。这也解释了为什么它可以工作，如果你上传不同的文件。无需清除缓存，您可以通过在读取文件后重置输入字段的值来解决此问题。 （b）

$ $ $ $ $ $ $ $ $＃menu-open-file [];

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 =数据[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（{
aspe ctRatio：x / y，
minHeight：200，
minWidth：200，
}）;
wiFirst = $（＃contener）。width（）;
hiFirst = $（＃contener）。height（）;
}
reader.readAsText（file）;
$（＃menu-open-file）[0] .value ='';
}
}）;

I have sth like drawing app. User can save projects and then load them. When i load first time one file (for e.g. project1.leds) make some changes in app but no saving it and then again load same file (project1.leds) nothing happen. I cant load same file more than once. If i load other file, its working.

Code:

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

Can i delete/remove cached file? Is it even cached in browser?

解决方案

It is because you're calling the function onchange. If you upload the same file the value of the file input has not changed from the previous upload and therefore isn't triggered. This also explains why it works if you upload a different file. No need to clear cache, you can work around this by resetting the input field's value after you read the file.

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

这篇关于Filereader - 再次上传相同的文件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！