Pow*_*ave 8 html google-chrome
<input type="file"/>在chrome中的"选择文件"模式窗口中单击取消后,文件及其路径被清除,在FF和IE文件中按取消后保持不变.有没有办法在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>https://jsfiddle.net/dqL97q0b/1/
| 归档时间： |
|
| 查看次数： |
9820 次 |
| 最近记录： |