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() {

  // 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>&times;</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"/>