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

Question

我正在使用一个简单的 html type="file" 输入，但我在 Chrome 中遇到了问题。具体来说，当您浏览并选择一个文件时，它会保存该值。但是，如果您重新浏览，然后按取消，它将清除该值。

html很简单：

<input type="file">

这是一个简单的小提琴 - http://jsfiddle.net/78ghn/。

这在其他浏览器中不会发生 - 有没有办法强制 Chrome 保留价值？

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>

我无法为此找到本机实现，因此我尝试了自己的解决方法。它从自定义 CSS 按钮覆盖中获取输入，然后将实际input元素添加到列表中并用空元素替换它。读取并显示该值，就像使用普通input. 它不包括在内，但提交它将涉及将原始input（ulwith的最后一个元素id='b'）移动到 aform并通过 JavaScript 提交。这不是最佳的，但它确实有效。