<input type="file"/>
在chrome中的“选择文件”模式窗口中单击取消后,文件及其路径被清除,在FF和IE文件中按取消后保持不变。有没有办法在chrome中改变这种行为?
答案 0 :(得分:1)
这是您点击按钮cancel
时甚至无法检测到的问题的答案:
答案 1 :(得分:0)
https://jsfiddle.net/dqL97q0b/1/
以下是一项解决方法,以便在按下取消时Chrome 无法删除用户现有文件。
代码备注: 如果已经选择了文件,则当用户打开文件选择器时,这将复制Dom元素。 然后,如果用户在chrome中单击取消,则会触发更改事件侦听器,并且值将为“”,因此在该特定情况下,我将删除现在为空的文件选择器,并还原克隆。
注意:每个文件选择器Dom Element都需要一个唯一的id,以便可以正确地存储和检索克隆。
注意:大多数代码只是记录,以显示事情是如何工作的,特别是我想突出显示如果你在Dom元素中使用内联事件监听器,例如 onclick =“fileClicked(event)”< / strong>然后您不需要将事件侦听器重新附加到克隆。
<!doctype html><html><head></head><body>
<h2>Fix for Chrome Removing File when 'cancel' clicked</h2>
Upload Image: <input id="imageUpload" type="file" onclick="fileClicked(event)" onchange="fileChanged(event)">
<br/><br/>
<label for="videoUpload">Upload Video:</label> <input id="videoUpload" type="file" onclick="fileClicked(event)" onchange="fileChanged(event)">
<br/><br/>
<div id="log"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
//This is All Just For Logging:
var debug = true;//true: add debug logs when cloning
var evenMoreListeners = true;//demonstrat re-attaching javascript Event Listeners (Inline Event Listeners don't need to be re-attached)
if (evenMoreListeners) {
var allFleChoosers = $("input[type='file']");
addEventListenersTo(allFleChoosers);
function addEventListenersTo(fileChooser) {
fileChooser.change(function (event) { console.log("file( #" + event.target.id + " ) : " + event.target.value.split("\\").pop()) });
fileChooser.click(function (event) { console.log("open( #" + event.target.id + " )") });
}
}
var clone = {};
// FileClicked()
function fileClicked(event) {
var fileElement = event.target;
if (fileElement.value != "") {
if (debug) { console.log("Clone( #" + fileElement.id + " ) : " + fileElement.value.split("\\").pop()) }
clone[fileElement.id] = $(fileElement).clone(); //'Saving Clone'
}
//What ever else you want to do when File Chooser Clicked
}
// FileChanged()
function fileChanged(event) {
var fileElement = event.target;
if (fileElement.value == "") {
if (debug) { console.log("Restore( #" + fileElement.id + " ) : " + clone[fileElement.id].val().split("\\").pop()) }
clone[fileElement.id].insertBefore(fileElement); //'Restoring Clone'
$(fileElement).remove(); //'Removing Original'
if (evenMoreListeners) { addEventListenersTo(clone[fileElement.id]) }//If Needed Re-attach additional Event Listeners
}
//What ever else you want to do when File Chooser Changed
}
</script>
</body></html>
答案 2 :(得分:-1)
简单而有效的解决方案:在变量中保留对文件的引用。每次输入的更改事件被触发时,请检查:
if(input.files[0]) // truthy, falsey
{
var file = input.files[0];
}
因此file
将包含最新选择的文件,当用户打开对话框但被取消时,文件引用将不会更改,并且仍包含以前选择的文件。