在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. 它不包含在内，但提交它需要将原始元素（ withinput的最后一个元素）移动到 a并通过 JavaScript 提交。这不是最佳的，但它确实有效。ulid='b'form