如何清除文件输入答案

【问题标题】：How to clear File Input如何清除文件输入
【发布时间】：2012-03-25 22:34:32
【问题描述】：

下面是我的 jquery 代码的一部分，它显示了文件输入和一个“清除文件”按钮。

var $imagefile = $('<input />').attr({
    type: 'file',
    name: 'imageFile',
    class: 'imageFile'
});

$image.append($imagefile);

var $imageclear = $('<input />').attr({
    type: 'button',
    name: 'imageClear',
    class: 'imageClear',
    value: 'Clear File'
});

$image.append($imageclear);

现在我有“清除文件”按钮的原因是，如果您单击该按钮，它将清除文件输入中的任何内容。当我点击“清除文件”按钮时，如何对其进行编码以便它真正清除文件输入？

【问题讨论】：

看这个：stackoverflow.com/questions/1043957/…
另见forum.jquery.com/topic/how-to-clear-a-file-input-in-ie

标签： jquery

【解决方案1】：

这应该可行：

$imageClear.on('click', function() { 
    $imageFile.val(''); 
});

【讨论】：

是的，它是一个比较简单的jQuery代码。这是一个跨浏览器的解决方案。
各位，在>= IE8中选择文件后<input type=file />就是readonly，出于安全考虑，这里是类似的Q和对应的A这里提出的解决方案。
<input type=file /> 数据类型是文件，我们无法通过将空字符串传递给输入字段来清除它。
也在 Chrome 上工作。看到这个stackoverflow.com/a/11953476/1830909 和我在下面的评论可能很有用。
如何在使用 jquery 的文件输入中删除多个文件上传中的文件？

【解决方案2】：

这也是我喜欢使用的方法，但我相信您需要将 bool true 参数添加到 clone 方法中，以使任何事件都与新对象保持关联，并且您需要清除内容。

    var input = $("#fileInput");

    function clearInput() {
        input = input.val('').clone(true);
    };

https://api.jquery.com/clone/

【讨论】：

【解决方案3】：

这适用于

 $("#yourINPUTfile").val("");

【讨论】：

【解决方案4】：

使用 jQuery 清除文件输入

$("#fileInputId").val(null);

使用 JavaScript 清除文件输入

document.getElementById("fileInputId").value = null;

【讨论】：

【解决方案5】：

我做过这样的事情，它对我有用

$('#fileInput').val(null);

【讨论】：

【解决方案6】：

如果您想确定这是跨浏览器的另一个解决方案是删除（）标签，然后追加（）或前置（）或以其他方式重新添加输入标签的新实例相同的属性。

<form method="POST" enctype="multipart/form-data">
<label for="fileinput">
 <input type="file" name="fileinput" id="fileinput" />
</label>
</form>

$("#fileinput").remove();
$("<input>")
  .attr({
    type: 'file',
    id: 'fileinput',
    name: 'fileinput'
    })
  .appendTo($("label[for='fileinput']"));

【讨论】：

【解决方案7】：

通过设置$("ID").val(null)，为我工作

【讨论】：

【解决方案8】：

在我的情况下，其他解决方案不能通过这种方式工作：

$('.bootstrap-filestyle :input').val('');

但是，如果您将在页面上输入超过 1 个文件，它将重置所有文件上的文本。

【讨论】：

【解决方案9】：

获取输入 id 并将 val 设置为空，如下所示：注意：不要在 val 空双引号 val(" ") 之间放置空格。

 $('#imageFileId').val("")

【讨论】：

清除文件输入的简单好办法

【解决方案10】：

此代码适用于所有浏览器和所有输入。

$('#your_target_input').attr('value', '');

【讨论】：

我推荐你使用like:$(document).ready(function( {$('#your_target_input').attr('value', ''); } );

【解决方案11】：

对于 React 用户

e.target.value = ""

但是如果文件输入元素是由不同的元素触发的（带有htmlFor 属性） - 这意味着你没有事件

所以你可以使用参考：

在函数的开头：

const inputRef = React.useRef();

在输入元素上

<input type="file" ref={inputRef} />

然后在 onClick 函数上（例如）你可以写

inputRef.current.value = ""

在 React 类中 - 相同的想法，但构造函数不同：this.inputRef = React.createRef()

【讨论】：

【解决方案12】：

好的，已经成功并获得批准；

$('.file-input-element').change();

$(document).on("change", 'input[type="file"][data-module-name="Test"]', function (e) {
    e.preventDefault();
    var controlName = $(this).attr('name');
    var fileFormData = new FormData();
    var files = e.target.files;
    if (files.length > 0) {
        var file = files[0];
        var fileName = file.name;
        var fileSize = file.size; //in bytes
        var fileType = file.type; //like "image/png"
        if (fileSize > App.maxAllowedSizeInBytes) {
            e.target.value = '';
            $(this).attr("value", '');
            $(this).change();
            toastr.error(langData.UIMaxFileSizeShouldBeFiveMb);
            return;
        } else {
            App.test.validation.ValidateFile(file);
            fileFormData.append("file", file, fileName);
            App.test.uploadFile(fileFormData, controlName, $(this));
        }
    }
});

【讨论】：