在Chrome中上传文件时点击“取消”会清除值 [英] Hitting 'Cancel' during file upload in Chrome clears value

问题描述

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

html很简单：

 < input type =file> 
  

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

在其他浏览器中不会发生这种情况 - 有没有强制Chrome保留该值的方法??解决方案

function f （）{document.getElementById（b）。appendChild（document.getElementById（a））; innerHTML = document.getElementById（c）。innerHTML document.getElementById（alert）。innerHTML ='您的最后一个文件是'.concat（document.getElementById（b））。 （document.getElementById（b）。 ）.lastChild.value.slice（12）））; } else {document.write（你什么也没有提交。）; }}

#a {opacity：0;宽度：100％; height：100％;}＃c {display：none;}＃d {width：100％; height：100％;}＃e {background-color：green;边框：2px纯黑色;颜色：白色; font-size：16pt; width：180px; height：90px;}＃f {position：relative;剩下的：25％ bottom：70％;}

< form> < div id ='e'> < span id ='d'> < input type =fileonchange ='f（）;'id ='a'> < /跨度> < span id ='f'>选择档案< / span> < / DIV> < input type ='button'value ='Submit'onclick ='g（）;'>< / form>< span id ='alert'>您没有选择任何文件< / span>< ; ul id ='b'>< / ul>< form id ='c'> < input type =fileonchange ='f（）;'id ='a'>< / form>

我无法为此找到原生实现，所以我尝试了我自己的解决方法。它从一个自定义的CSS按钮叠加输入，然后添加实际的输入元素到一个列表中，并用一个空的替换它。该值将被读取并显示，与正常的 input 一样。它不包括在内，但是提交它会涉及将原始的 input （ ul 的最后一个元素移动到 id ='b'）复制到表单并通过JavaScript提交。这不是最佳的，但它确实有效。

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

解决方案

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.

这篇关于在Chrome中上传文件时点击“取消”会清除值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！