输入类型=“文件”,在chrome中单击取消后清除文件

时间:2013-07-22 23:11:02

标签: html google-chrome

<input type="file"/>在chrome中的“选择文件”模式窗口中单击取消后,文件及其路径被清除,在FF和IE文件中按取消后保持不变。有没有办法在chrome中改变这种行为?

3 个答案:

答案 0 :(得分:1)

这是您点击按钮cancel时甚至无法检测到的问题的答案:

How to detect when cancel is clicked on file input?

答案 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>

https://jsfiddle.net/dqL97q0b/1/

答案 2 :(得分:-1)

简单而有效的解决方案:在变量中保留对文件的引用。每次输入的更改事件被触发时,请检查:

if(input.files[0]) // truthy, falsey
{
  var file = input.files[0];
}

因此file将包含最新选择的文件,当用户打开对话框但被取消时,文件引用将不会更改,并且仍包含以前选择的文件。