在Chrome中上传文件时点击“取消”会清除值 [英] Hitting 'Cancel' during file upload in Chrome clears value
问题描述
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屋!