0

Tengo un campo input file como el de la imagen. introducir la descripción de la imagen aquí

<td width="43%" colspan="3">Adjuntar un archivo:<input tabindex="-1" class="fileObligatorio" id="ControlAnexar0" style="width: 100%;"  type="file">
  <input type="button" onClick="location.reload()" value ="Reload">

Tras un location.reload() de la página, el fichero seleccionado se pierde y has de seleccionarlo de nuevo.

Hay algún modo de guardar ese fichero en una variable en Javascript para poder cargarlo de nuevo tras un reload?

Temo que por seguridad esto no se pueda.

2 respuestas 2

3

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:

  1. En cuanto el usuario seleccione un fichero, lee su contenido con FileReader
  2. Guarda el contenido en el localStorage (o sessionStorage)
  3. Cuando la página se recargue, comprueba si tienes un fichero en el localStorage
  4. Si lo tienes, muestra un enlace indicando que el usuario ya subió un fichero (pon el nombre)
  5. 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)
3
  • muchas gracias! muy completo. Ahora queda más como puro conocimiento ya que me han dicho que quite el reload. Pa la próx ya se. ^^
    – lois6b
    Commented el 15 dic. 2016 a las 15:38
  • @lois6b añadí un pequeño ejemplo que podrías usar como guía
    – Alvaro Montoro
    Commented el 15 dic. 2016 a las 15:41
  • si, lo acabo de ver. la guinda del pastel. gracias de nuevo
    – lois6b
    Commented el 15 dic. 2016 a las 15:41
3

Así como tú dices, por razones de seguridad no es posible realizar lo que deseas.

Aquí hay más información acerca de este comportamiento del navegador.

1
  • muchas gracias por la información ^^
    – lois6b
    Commented el 15 dic. 2016 a las 15:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.