14

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

4

3 回答 3

1

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/

于 2017-09-14T15:47:07.047 回答
0

是的，如果你想要一个基于 jquery 的解决方案，你可以使用以下方法，这就是 chrome 的问题。

// 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();
       }
    }
}
于 2021-11-17T16:35:29.013 回答
-1

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

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

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

于 2018-03-08T08:59:34.097 回答