Como dice Garrizano en su respuesta, por motivos de seguridad no se puede mantener el fichero seleccionado en el input type="file"
, pero sí hay maneras de mantener el fichero cuando se recargue la página.
La idea sería usar la API FileReader para leer el contenido del fichero y guardarlo en memoria para poder usarlo después de que se recargue la página (puedes ver un ejemplo de como leer el contenido usando FileReader en otra respuesta que escribí sobre el tema).
Entonces lo que tendrías que hacer es lo siguiente:
- En cuanto el usuario seleccione un fichero, lee su contenido con FileReader
- Guarda el contenido en el
localStorage
(o sessionStorage
)
- Cuando la página se recargue, comprueba si tienes un fichero en el
localStorage
- Si lo tienes, muestra un enlace indicando que el usuario ya subió un fichero (pon el nombre)
- Deja el
input type="file"
vacío (por si el usuario quiere cambiar el fichero).
Aquí dejo un ejemplo de cómo se podría ver el código:
<div id="nombrefichero"></div>
<div>
Adjuntar un archivo:<input tabindex="-1" class="fileObligatorio" id="ControlAnexar0" style="width: 100%;" type="file">
</div>
<input type="button" onClick="location.reload()" value ="Reload">
<script>
function ficheroCargado(nombre, contenido) {
// mostramos los valores
document.getElementById("nombrefichero").innerHTML = "Fichero cargado: " + nombre;
console.log(contenido);
// guardamos los valores en el localStorage
localStorage.setItem("nombre", nombre);
localStorage.setItem("contenido", contenido);
}
function leerFichero(evt) {
var file = evt.target.files[0]; // FileList object
var lector = new FileReader();
lector.onload = function(e) {
ficheroCargado(file.name, this.result);
}
lector.readAsText(file);
}
document.getElementById('ControlAnexar0').addEventListener('change', leerFichero, false);
if (localStorage.getItem("nombre") && localStorage.getItem("contenido")) {
ficheroCargado(localStorage.getItem("nombre"), localStorage.getItem("contenido"));
}
</script>
Ten en cuenta que esta solución tiene algunas limitaciones:
- el fichero debe ser menor que el tamaño permitido en el
localStorage
(o podrías usar algún otro método para almacenarlo),
- las cookies deben estar activadas,
- y el archivo debe leerse antes de recargar la página (ten en cuenta que la lectura es asíncrona)