输入类型=“文件”，点击chrome中的取消后清除文件 [英] input type="file", clearing file after clicking cancel in chrome
问题描述
https://jsfiddle.net/dqL97q0b/1/
这是一个解决方法，这样当按下取消按钮时，Chrome 无法删除用户现有的文件。
代码注释：
这使得Dom Element如果已经选择了一个文件，用户将打开文件选择器。
然后，如果用户确实点击了chrome中的cancel，它会触发更改事件监听器，值将为，因此在这种特定情况下，我将删除现在为空的文件选择器并恢复克隆。注意：每个文件选择器Dom元素都需要一个唯一的ID，以便克隆可以被正确存储和检索。
注意：大多数代码只是日志记录，以显示事情的工作方式，特别是我想强调，如果您在Dom元素中使用内联事件侦听器，如 onclick =fileClicked（event），那么您不需要将事件侦听器重新附加到克隆。
<$ c点击取消后，修复了Chrome删除文件< / h2>上传图片：<输入><>< head>< html>< head>< / head>< body><输入id =imageUploadtype =fileonclick =fileClicked（event）onchange =fileChanged（event）>< br />< br />< label for =videoUpload>上传视频：< / label> < input id =videoUploadtype =fileonclick =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> ; //这是全部仅用于记录：var debug = true; // true：克隆时添加调试日志var evenMoreListeners = true; //演示重新附加javascript事件监听器（内联事件监听器不需要重新连接）if（evenMoreListeners）{var allFleChoosers = $（input [type ='file']）; addEventListenersTo（allFleChoosers）;函数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（）函数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（）; //'保存克隆'} //当文件选择器被点击时，你想要做什么// FileChanged（）函数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）; //'恢复克隆'$（fileElement）.remove（）; //'删除原始'if（evenMoreListeners）{addEventListenersTo（clone [fileElement.id]）} //如果需要重新附加其他事件监听器} //当文件选择器改变时你还想做什么}< / script> ;< / body>< / html>
https://jsfiddle.net/dqL97q0b/1/
<input type="file"/> The file and it path is cleared after clicking cancel in 'choose file' modal window in chrome, in FF and IE file stays untouched after pressing cancel. Is there any way to change this behavior in chrome?
https://jsfiddle.net/dqL97q0b/1/
Here is a work around, so that Chrome cannot remove the users existing file when cancel is pressed.
Code Notes: This makes a clone of the Dom Element when User opens the file chooser if there is already a file selected. Then if the user does click cancel in chrome it fires the change Event Listener and the value Will be "", so in that specific case I remove the now empty file chooser, and restore the clone.
Note: each file chooser Dom Element needs a unique id, so that the clone can be stored and retrieved properly.
Note: Most of the code is just logging, to show how things work, specifically I wanted to highlight that if you use the inline event listeners in the Dom Element such as onclick="fileClicked(event)" then you do not need to re-attach event listeners to the clone.
<!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>
https://jsfiddle.net/dqL97q0b/1/
这篇关于输入类型=“文件”，点击chrome中的取消后清除文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
