<input type="file"/> 在 chrome 的“选择文件”模式窗口中单击取消后，文件及其路径被清除，在 FF 和 IE 中，按取消后文件保持不变。有什么办法可以改变 chrome 中的这种行为？
【问题讨论】：
标签： html google-chrome
https://jsfiddle.net/dqL97q0b/1/
这是一种解决方法，以便 Chrome 在按下取消时无法删除用户现有文件。
代码注释： 如果已经选择了文件，则当用户打开文件选择器时，这会克隆 Dom 元素。 然后，如果用户确实在 chrome 中单击取消，它会触发更改事件侦听器，并且值将是“”，因此在这种特定情况下，我删除现在为空的文件选择器，并恢复克隆。
注意：每个文件选择器 Dom Element 都需要一个唯一的 id，以便可以正确存储和检索克隆。
注意：大部分代码只是记录日志，以显示事情是如何工作的，特别是我想强调一下，如果您在 Dom 元素中使用内联事件侦听器，例如 onclick="fileClicked(event)" 那么您不需要将事件侦听器重新附加到克隆。
<!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>【讨论】：
是的，如果您想要基于 jquery 的解决方案，您可以使用以下解决方案。
// Defining a global variable to persist data
let $old_value;
// if input field id is file and its inside a div which has id file-wrapper
$('#file_wrapper').on('change', '#file', function() {
const img = this.files[0];
// If image selected
if (img) {
// Change thumbnail or what your want
// Cloning the input filed value for future
old_value = $(this).clone();
} else {
// If no file selected or canceled and previously selected an image
if (old_value) {
$(this).remove();
let new_img = $('#file_wrapper').append(old_img);
old_img = new_img.clone();
}
}
}
【讨论】：
简单而有效的解决方案：在变量中保留对文件的引用。每次触发输入的更改事件时，您都会检查：
if(input.files[0]) // truthy, falsey
{
var file = input.files[0];
}
所以file 将包含最新选择的文件，当用户打开对话框但取消时，文件引用不会更改，仍然包含先前选择的文件。
【讨论】：