web-dev-qa-db-fra.com

Filereader - télécharger à nouveau le même fichier ne fonctionne pas

J'ai quelque chose comme une application de dessin. L'utilisateur peut enregistrer des projets, puis les charger. Lorsque je charge pour la première fois un fichier (par exemple project1.leds), effectuez des modifications dans l'application, mais ne l'enregistrez pas, puis chargez à nouveau le même fichier (project1.leds), rien ne se passe. Je ne peux pas charger le même fichier plus d'une fois. Si je charge un autre fichier, cela fonctionne.

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

Puis-je supprimer/supprimer un fichier mis en cache? Est-il même mis en cache dans le navigateur?

javascriptjqueryfilefilereader
25
sko

C'est parce que vous appelez la fonction onchange. Si vous téléchargez le même fichier, la valeur de l'entrée de fichier n'a pas changé par rapport au téléchargement précédent et n'est donc pas déclenchée. Cela explique également pourquoi cela fonctionne si vous téléchargez un fichier différent. Pas besoin d'effacer le cache, vous pouvez contourner ce problème en réinitialisant la valeur du champ de saisie après avoir lu le fichier.

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

Essayez le code ci-dessous, cela devrait fonctionner. En cliquant sur le bouton de téléchargement, effacez la valeur existante.

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

parce que l'entrée met en cache la même valeur de fichier, donc lorsque vous chargez à nouveau le même fichier, elle utilise la propriété cache pour lire la valeur. tout ce que vous devez faire est de définir une instruction conditionnelle lorsque vous utilisez l'élément d'entrée et définissez la propriété value d'entrée sur une chaîne vide et cela devrait fonctionner

input.value = "";

et si vous utilisez un gestionnaire d'événements,

e.target.value = "";
0
itsCodingThing

Le seul problème avec la réponse ci-dessus est que votre code HTML n'affichera plus le nom du fichier après le téléchargement. Au lieu de cela, il continuera à dire "Aucun fichier choisi", ce qui pourrait prêter à confusion pour les utilisateurs.

Pour contourner ce problème, vous pouvez masquer l'entrée et la remplacer par une étiquette qui reproduit l'affichage de l'entrée, comme suit:

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

article bien expliqué comment faire cela ici: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

0
Harry Stevens