Hitting 'Cancel' during file upload in Chr

问题:

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

回答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.