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

Filereader - upload same file again not working

提问by sko

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 the 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 another file, it's working.

我有喜欢绘图的应用程序。用户可以保存项目然后加载它们。当我第一次加载一个文件（例如 project1.leds）时，在应用程序中进行一些更改但没有保存它，然后再次加载相同的文件（project1.leds）什么也没有发生。我不能多次加载同一个文件。如果我加载另一个文件，它就可以工作。

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?

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

回答by OldGreg

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.

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

回答by Reshma

Try the below code, It should work. While clicking the upload button clear the existing value.

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

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

回答by itsCodingThing

because input is caching the same file value so when you load the same file again it uses the cache to read value property. all you need to do is set a conditional statement when you use input element and set the value property of input to an empty string and it should work

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

input.value = "";

and if you are using an event handler then

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

e.target.value = "";

回答by Harry Stevens

The only problem with the above answer is that your HTML will no longer display the file name after the upload. Instead, it will continue to say "No file chosen", which might be confusing for users.

上述答案的唯一问题是您的HTML在上传后将不再显示文件名。相反，它会继续说“没有选择文件”，这可能会让用户感到困惑。

To get around this, you can hide the input and replace it with a label that replicates the display of the input, like so:

为了解决这个问题，您可以隐藏输入并将其替换为复制输入显示的标签，如下所示：

HTML:

HTML：

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

CSS:

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:

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

well explained article how to do this here: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

详细解释了如何在此处执行此操作的文章：https: //tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/