如何清除输入类型=文件在模式引导3时，打开它与onclick

Question

我在Bootstrap 3中有一个模态，我想从用户那里获得一个文件。我的问题是，当用户选择文件，但它无法加载和关闭模式，并再次打开它，以前的文件仍然存在。我怎么能删除这个文件在函数中打开与onclick模态?

<button class="pointer" onclick="return contractUpload('${ml.getId()}')"><a>upload contract</a></button>

<div class="modal fade" id="contractModal">
<div class="container">
<div class="modal-dialog" style="margin-top: 15%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">contract modal <span id="mId2"></span></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">select file :</label>
<label class="btn btn-success">
<input type="file" id="contractFile" accept="application/pdf">
<i class="fa fa-cloud-upload"></i>
<span id="browse">choose :</span>
</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success pull-left" data-dismiss="modal">upload</button>
</div>
</div>
</div>
</div>
</div>

<script>
function contractUpload(mId) {
$('#contractModal').modal();
document.getElementById("mId2").innerHTML = mId;
}
</script>

我使用了下面的代码，但它不起作用:

document.getElementById("contractFile").value = "";

Answer 1

您可能希望在隐藏模式后重置#contractFile元素的值。这可以通过监听hidden.bs.modal事件来实现，例如:

const modal = document.getElementById('contractModal')
modal.addEventListener('hidden.bs.modal', () => {
document.getElementById('contractFile').value = '';
});

当然，如果你想在模态完全隐藏之前重置输入，然后听hide.bs.modal代替，即使这会创建一个奇怪的UI/UX，因为该字段随着模态淡出而重置。

参见下面的概念验证示例:

const modal = document.getElementById('contractModal')
modal.addEventListener('hidden.bs.modal', () => {
document.getElementById('contractFile').value = '';
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#contractModal">Open modal</button>
<div class="modal fade" id="contractModal">
<div class="container">
<div class="modal-dialog" style="margin-top: 15%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">contract modal <span id="mId2"></span>
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">select file :</label>
<label class="btn btn-success">
<input type="file" id="contractFile" accept="application/pdf">
<i class="fa fa-cloud-upload"></i>
<span id="browse">choose :</span>
</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success pull-left" data-dismiss="modal">upload</button>
</div>
</div>
</div>
</div>
</div>