2 回答

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個(gè)贊
基本上,下面的代碼檢查輸入中是否存在文件......
如果文件存在,則會(huì)發(fā)出確認(rèn)消息。
如果用戶(hù)因?yàn)椴淮_定是否要提交上傳而取消,則模式將不會(huì)關(guān)閉。
但如果上傳文件從未存在于上傳輸入中,則模式將照常關(guān)閉:-)

TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超10個(gè)贊
// launch the example modal
$('#test-modal').modal('show');
// check for changes on input and force value
$('#test-upload').on('change', function() {
// force the value in the dom
$(this).attr('value', $(this).val());
});
// lets run the confirm checks on hide
$(document).on('hide.bs.modal', '#test-modal', function(e) {
// if upload value is not empty/specified
if ($('#test-upload').val() != '') {
// confirm your sure about cancelling upload
var uploadSure = confirm("You sure you want to cancel your upload?");
// confirm checks
if (!uploadSure) {
// stop modal closing
e.preventDefault();
} else {
// continue closing/hiding modal
}
}
});
<div class="modal fade" id="test-modal">
<div class="modal-dialog modal-dialog-scrollable">
<form class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Upload Confirmation</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="file" class="form-control-file" id="test-upload">
</div>
</div>
</form>
</div>
</div>
<div class="container mt-3">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#test-modal">
Launch Modal
</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
- 2 回答
- 0 關(guān)注
- 339 瀏覽
添加回答
舉報(bào)