"Annulla" durante il caricamento di file in Chrome cancella il valore

Question

Sto lavorando con un semplice input di tipo html type = "file" e sto riscontrando un problema in Chrome. In particolare, quando si esplora e si sceglie un file, si salva il valore. Tuttavia, se si naviga nuovamente, quindi premere annulla cancellerà il valore.

il codice HTML è semplice:

<input type="file"> 

Ecco un semplice fiddle- http://jsfiddle.net/78ghn/.

Questo non accade in altri browser - esiste un modo per forzare Chrome a mantenere il valore ??

Answer 1

function f() 
 
{ 
 
    document.getElementById("b").appendChild(document.getElementById("a")); 
 
    document.getElementById("d").innerHTML = document.getElementById("c").innerHTML 
 
    document.getElementById("alert").innerHTML = 'Your last file was '.concat(document.getElementById("b").lastChild.value.slice(12)) 
 
} 
 
function g() 
 
{ 
 
    if(document.getElementById("b").lastChild.value) 
 
    { 
 
    \t document.write("You have submitted ".concat(document.getElementById("b").lastChild.value.slice(12))); 
 
    } 
 
    else 
 
    { 
 
    \t document.write("You have submitted nothing."); 
 
    } 
 
}

#a 
 
{ 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#c 
 
{ 
 
    display: none; 
 
} 
 
#d 
 
{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#e 
 
{ 
 
    background-color: green; 
 
    border: 2px solid black; 
 
    color: white; 
 
    font-size: 16pt; 
 
    width: 180px; 
 
    height: 90px; 
 
} 
 
#f 
 
{ 
 
    position: relative; 
 
    left: 25%; 
 
    bottom: 70%; 
 
}

<form> 
 
    <div id='e'> 
 
    <span id='d'> 
 
     <input type="file" onchange='f();' id='a'> 
 
    </span> 
 
    <span id='f'>Select File</span> 
 
    </div> 
 
    <input type='button' value='Submit' onclick='g();'> 
 
</form> 
 
<span id='alert'>You have chosen no files.</span> 
 
<ul id='b'> 
 
</ul> 
 
<form id='c'> 
 
    <input type="file" onchange='f();' id='a'> 
 
</form>

non sono riuscito a trovare un'implementazione nativa per questo, così ho cercato la mia soluzione. Prende input da un overlay del pulsante CSS personalizzato, quindi aggiunge l'elemento effettivo input a un elenco e lo sostituisce con uno vuoto. Il valore viene letto e visualizzato, come sarebbe normale con input. Non è incluso, ma l'invio implicherebbe lo spostamento dell'originale input (ultimo elemento di ul con id='b') su un form e l'invio tramite JavaScript. Non è ottimale, ma funziona.