Question

下面是我所拥有的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);

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

Answer 1

这应该有效：

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

Answer 2

使用jQuery清除文件输入

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

使用JavaScript清除文件输入

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

Answer 3

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

    var input = $("#fileInput");

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

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

Answer 4

适用于React用户

e.target.value = ""

但是如果文件输入元素是由另一个元素（具有htmlFor属性）触发的-这意味着您没有事件

所以您可以使用ref：

func开头：

const inputRef = React.useRef();

在输入元素上

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

然后在onClick函数上（例如），您可以编写

inputRef.current.value = ""

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

Answer 5

我做过类似的事情并且为我工作

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

Answer 6

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

<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']"));

Answer 7

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

Answer 8

在我的情况下，其他解决方案除此以外不起作用：

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

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

Answer 9

获取输入ID并将val设置为空，如下所示：注意：不要在val空双引号val（“”）之间放置空格。

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

Answer 10

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

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

Answer 11

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

$('.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));
        }
    }
});

Answer 12

这适用于

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

如何清除文件输入

12 个答案: