使用onclick打開模式引導程序3時如何清除輸入類型=文件

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>