Filereader - загрузить тот же файл снова не работает

У меня есть приложение для рисования. Пользователь может сохранять проекты, а затем загружать их. Когда я загружаю первый раз один файл (например, 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);
});

Можно ли удалить/удалить кешированный файл? Он даже кэшируется в браузере?

Ответ 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 = '';
  }
});

Ответ 2

Единственная проблема с вышеприведенным ответом заключается в том, что ваш 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);