在Chrome中上传文件期间点击“取消”可清除值

Question

I'm working with a simple html type="file" input, and I'm having an issue in Chrome. Specifically, when you browse to and choose a file, it saves the value. However, if you re-browse, then press cancel it will clear out the value.

The html is simple:

<input type="file">

Here is a simple fiddle- http://jsfiddle.net/78ghn/ .

This doesn't happen in other browsers -- is there a way to force Chrome to retain the value??

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) { document.write("You have submitted ".concat(document.getElementById("b").lastChild.value.slice(12))); } else { 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> 

I was unable to find a native implementation for this, so I tried my own workaround. It takes input from a custom CSS button overlay, then adds the actual input element to a list and replaces it with an empty one. The value is read and displayed, as it would be with a normal input . It is not included, but submitting it would involve moving the original input (last element of ul with id='b' ) to a form and submitting it via JavaScript. It is not optimal, but it does work.