![](/img/trans.png)
[英]Bootstrap 4 file input with bs-custom-file-input and Symfony 5 collection with dynamic upload fields
[英]Bootstrap 4 / jQuery - Clear filename in input field <input type='file' /> bs-custom-file-input
我得到了一个带有推荐插件的 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但我无法让它工作。
没有要清除的值,插件为自定义文件生成一个 label 你看到的不是输入而是 label,如果你使用浏览器检查你可以看到它,替换这个:
// Clear the value
$('#customFile').val('');
这样:
// Clear the value, replace it by whatever text you want
$('#customFile').next('label').html('Select a file');
这适用于单个字段。 它支持带有子标签的标签(对于长名称或多个文件)
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
尝试复制 HTML:
// At beginning
var div = $('.custom-file')[0]; // Or use an ID
var html = div.innerHTML;
// To clear the input
div.innerHTML = html;
它只记住空输入字段的样子,并相应地更新代码。
请记住, div
中的所有内容都已重置。 为了防止这种情况,请在输入周围添加一个额外的容器:
<div class="custom-file">
<span id="customFileInputContainer">
<input type="file" class="custom-file-input" id="customFile">
</span>
<label class="custom-file-label" for="customFile" data-browse="Browse">Select a file</label>
</div>
JavaScript 需要更改以适应此:
var div = $('#customFileInputContainer')[0];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.