javascript - tag - title html attribute

Filereader-subir el mismo archivo de nuevo no funciona

Question

Tengo algo como la aplicación de dibujo. El usuario puede guardar proyectos y luego cargarlos. Cuando cargo por primera vez, un archivo (por ejemplo, project1.leds) realiza algunos cambios en la aplicación pero no lo guarda y luego vuelve a cargar el mismo archivo (project1.leds), no sucede nada. No puedo cargar el mismo archivo más de una vez. Si carga otro archivo, está funcionando.

Código:

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

¿Puedo eliminar / eliminar el archivo en caché? ¿Es incluso cacheado en el navegador?

Answer 1

El único problema con la respuesta anterior es que su HTML ya no mostrará el nombre del archivo después de la carga. En su lugar, continuará diciendo "No se seleccionó ningún archivo", lo que podría ser confuso para los usuarios.

Para evitar esto, puede ocultar la entrada y reemplazarla con una etiqueta que replica la visualización de la entrada, de esta manera:

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

artículo bien explicado cómo hacer esto aquí: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Answer 2

Es porque estás llamando a la función onchange. Si carga el mismo archivo, el valor de la entrada del archivo no ha cambiado con respecto a la carga anterior y, por lo tanto, no se activa. Esto también explica por qué funciona si subes un archivo diferente. No es necesario borrar la memoria caché, puede solucionar esto restableciendo el valor del campo de entrada después de leer el archivo.

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