How to keep the file after a reload?

As you say, for security reasons it is not possible to do what you want.

Here is more information about this browser behavior.

As Garrizan says in his answer , for security reasons you cannot keep the selected file in the input type="file", but there are ways to keep the file when the page is reloaded.

The idea would be to use the FileReader API to read the content of the file and store it in memory so that it can be used after the page is reloaded (you can see an example of how to read the content using FileReader in another answer I wrote on the topic ).

So what you should do is the following:

1. As soon as the user selects a file, read its content with FileReader
2. Save the content in the localStorage(or sessionStorage)
3. When the page reloads, check if you have a file in thelocalStorage
4. If you have it, show a link indicating that the user has already uploaded a file (put the name)
5. Leave input type="file"empty (in case the user wants to change the file).

Here is an example of what the code might look like:

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

Note that this solution has some limitations:

• the file must be less than the size allowed in it localStorage(or you could use some other method to store it),
• cookies must be activated,
• and the file must be read before reloading the page (note that the read is asynchronous)