Bootstrap 4 / jQuery - 清除输入字段中的文件名 <input type='file' /> bs-custom-file-input

Question

我得到了一个带有推荐插件的 Bootstrap 表单来为自定义文件输入设置动画：bs-custom-file-input。请参阅：https : //getbootstrap.com/docs/4.5/components/forms/#file-browser 该表单包含一个用于添加附件的输入字段（type="file"）。如果用户选择文件大小超过 1MB 的文件，则会显示带有错误消息的警告框。

如何在错误消息后清除输入字段中的文件名？

到目前为止，这是我的代码：

HTML 表单

<div class="container">
<div class="row">
    <div class="col-md-12">

        <form id="testform" method="post" enctype="multipart/form-data">

            <div class="form-row">

                <div class="form-group col-12">
                    <label for="customFile">Attachment</label>

                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="customFile">
                        <label class="custom-file-label" for="customFile" data-browse="Browse">Select a file</label>
                    </div>
                </div>

            </div>

        </form>

    </div>
</div>

$(document).ready(function() {

$('#customFile').on('change', function() {

    // The recommended plugin to animate custom file input: bs-custom-file-input, is what bootstrap using currently
    bsCustomFileInput.init();

    // Set maximum filesize
    var maxSizeMb = 1;

    // Get the file by using JQuery's selector
    var file = $('#customFile')[0].files[0];

    // Make sure that a file has been selected before attempting to get its size.
    if(file !== undefined) {

        // Get the filesize
        var totalSize = file.size;

        // Convert bytes into MB
        var totalSizeMb = totalSize  / Math.pow(1024,2);

        // Check to see if it is too large.
        if(totalSizeMb > maxSizeMb) {

            // Create an error message
            var errorMsg = 'File too large. Maximum file size is ' + maxSizeMb + ' MB. Selected file is ' + totalSizeMb.toFixed(2) + ' MB';

            // Show the error
            alert(errorMsg);

            // Clear the value
            $('#customFile').val('');

            // How to clear the filename in the input field?
            alert('How to clear the filename in the input field?');

            // Return FALSE
            return false;
        }
    }

});

});

编辑：工作小提琴： https ://jsfiddle.net/Matti79/racv6w4d/15/

我在这里发现了一个问题：https : //github.com/Johann-S/bs-custom-file-input/issues/37但我无法让它工作。

Answer 1

没有要清除的值，插件为自定义文件生成一个标签，您看到的不是输入而是标签，如果您使用浏览器检查可以看到它，请将其替换为：

// Clear the value
$('#customFile').val('');

这样 ：

// Clear the value, replace it by whatever text you want
$('#customFile').next('label').html('Select a file');

Answer 2

这适用于单个字段。它支持带有子标签（对于长名称或多个文件）

function remove_selected(id_input){
   var fileInput = document.getElementById(id_input)
   fileInput.value = ''
   fileInput.dispatchEvent(new Event('change'));
}

remove_selected('file');

来源： https: //github.com/Johann-S/bs-custom-file-input/issues/86