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

Posted 2023-02-15

【中文标题】Filereader - 再次上传相同的文件不起作用

【英文标题】：Filereader - upload same file again not working

【发布时间】：2014-12-25 09:49:09

【问题描述】：

我有一些喜欢绘图的应用程序。用户可以保存项目然后加载它们。当我第一次加载一个文件（例如 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);
);

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

【问题讨论】：

它没有被缓存，它只是被选中的文件。您正在侦听更改事件。如果您再次选择相同的文件，则没有任何更改，则不会触发任何更改事件。您可以在阅读后尝试设置e.target.files = null 或类似内容。 （顺便说一句，它与上传无关，你不是在上传任何东西，只是在本地加载它，对吧？）

是的，我在本地加载它。 e.target.files = null 没有帮助。

【参考方案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 = '';
  
);

【讨论】：

仅供参考，Chrome 似乎不会在第二次触发同一个文件的 onload 事件。

? $("#menu-open-file")[0].value = ''; 是一种魅力。用Safari 9.1 和Chrome 50 测试谢谢！

@Horacio：谢谢。我使用了这个解决方案。我的错误已解决。

我认为@sko 应该考虑接受这个作为答案。

【参考方案2】：

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

input.value = "";

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

e.target.value = "";

【讨论】：

欢迎来到 SO。您可能需要检查您正在回答的问题的日期。这个有点老了，你的输入才真正有意义。

这个答案仍然非常相关和有益。这就是它继续获得支持的原因。

【参考方案3】：

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

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

【参考方案4】：

上述答案的唯一问题是您的 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/