Bootstrap 4 如果输入类型文件有值，则在关闭模式之前显示确认消息

Question

大家好，你们好吗，我现在正在开发一个项目，我想创建一个简单的技巧。我编写了一个简单的 jQuery 代码，但它仍然无法按我想要的方式工作。故事说：如果输入类型文件有一个值，则在关闭模式之前显示带有“是”或“否”的确认消息， 因此如果用户想要离开页面并关闭模式对话框，则应该显示一条确认消息，说明他是否确定要关闭模式对话框....

HTML 代码：

<div class="modal fade" id="modal_a" tabindex="-1" role="dialog" aria-labelledby="modal_aLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">

<div class="modal-dialog modal-dialog-scrollable" role="document">

<div class="modal-content">

<div class="modal-body">

   <div class="uploadavatar">

        <input type="file" 

               class="custom-file-input" 

               id="ID12" 

               name="avatar"

               value=""

               hidden />

        <label role="button" class="btn" for="ID12">

            Upload Now

        </label>

    </div>

</div>

</div>

</div>

</div>

JS代码：

$(document).ready(function() {

    $(document).on('hidden.bs.modal', '#modal_a', function (e) {

        $('#ID12').on('change', function(e){

            const FileLength = $(this)[0].files.length;

            if(FileLength > 0){

                const ConfirmMessage = confirm("Are you sure?");

                if(ConfirmMessage){

                    $("#ID12").val('');

                }

            }

        });

    });

});

Answer 1

基本上，下面的代码检查输入中是否存在文件......如果文件存在，则会发出确认消息。如果用户因为不确定是否要提交上传而取消，则模式将不会关闭。但如果上传文件从未存在于上传输入中，则模式将照常关闭:-)

Answer 2

// launch the example modal$('#test-modal').modal('show');// check for changes on input and force value$('#test-upload').on('change', function() {&nbsp; // force the value in the dom&nbsp; $(this).attr('value', $(this).val());});// lets run the confirm checks on hide$(document).on('hide.bs.modal', '#test-modal', function(e) {&nbsp; // if upload value is not empty/specified&nbsp; if ($('#test-upload').val() != '') {&nbsp; &nbsp; // confirm your sure about cancelling upload&nbsp; &nbsp; var uploadSure = confirm("You sure you want to cancel your upload?");&nbsp; &nbsp; // confirm checks&nbsp; &nbsp; if (!uploadSure) {&nbsp; &nbsp; &nbsp; // stop modal closing&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; // continue closing/hiding modal&nbsp; &nbsp; }&nbsp; }});<div class="modal fade" id="test-modal">&nbsp; <div class="modal-dialog modal-dialog-scrollable">&nbsp; &nbsp; <form class="modal-content">&nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; <h5 class="modal-title">Upload Confirmation</h5>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close" data-dismiss="modal">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>&times;</span>&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="file" class="form-control-file" id="test-upload">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </form>&nbsp; </div></div><div class="container mt-3">&nbsp; <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#test-modal">&nbsp; &nbsp; Launch Modal&nbsp; </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"/>