文件上传暂停，显示模态窗口，继续上传

Question

我想暂停文件上传，显示文件要求，然后继续。 示例：用户单击“上传文件”，我向他显示一个模式窗口，其中包含有关他应该上传的文件的详细信息，他单击确定，然后我向他显示弹出窗口以从他的计算机中选择一个文件。

问题是当他到达第二个上传输入时，浏览器打开一个窗口来选择一个文件，它分配给第一个输入并立即打开另一个窗口来选择第二个文件。所以在第 4 次输入时，用户必须选择他已经选择的 3 个文件，最后是第四个。

触发函数总是通过我所有的输入。

我尝试了 ev.stopPropagation、$(this).off('click')、return false 等。要么我把它放在了错误的地方，要么它不能解决我的问题。我什至尝试过使用$('#add-office input[type="file"]').each() and then $(this).on('click').

这是我的代码

/* Jquery */

var warning = false;
$('#add-office input[type="file"]').on('click', function(e) {
  if (warning) {
    warning = false;
    return;
  }
  e.preventDefault();

  $('#files-info-wrapper').show();
  $('#confirm').on('click', (ev) => {
    ev.preventDefault();
    $('#files-info-wrapper').hide();
    warning = true;

    $(this).trigger('click');

  });
});

span{
display:block;
}

#files-info-wrapper{
display: none;
height:150px;
width:200px;
background: blue;
color: white;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
text-align:center;
}
#confirm{
color:white;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML -->

<div id="add-office">
<span>Logo</span>
    <input type="file" name="logo" accept="image/x-png,image/gif,image/jpeg"></span>
<span>Cover photo</span>
    <input type="file" name="cover_photo" accept="image/x-png,image/gif,image/jpeg"></span>
<span>To download</span>
    <input type="file" name="files[]" accept=".pdf,.doc,.docx" multiple></span>
<span>Gallery</span>
    <input type="file" name="photos[]" accept="image/x-png,image/gif,image/jpeg" multiple>
    </div>
    
    <div id="files-info-wrapper">
    <p>Requirements</p>
    <p>Your file must be max 2MB</p>
    <a href="#" id="confirm">Okay</a>
    </div>

感谢您的帮助

Answer 1

在另一个内部设置事件处理程序总是一个错误来源。每次用户点击input type="file" 时，都会设置一个额外的$('#confirm').on('click', ... 处理程序。

所以简单的解决方案是把它放在外面。但是现在您需要知道哪个文件输入触发了file-info-wrapper 来显示。我会为此使用data-* 属性。见下文。

// Programmatically add a data attribute
$('#add-office input[type="file"]').each(function(i,el){
  $(this).attr("data-requirement", "no")
})

// The file input click handler
$('#add-office input[type="file"]').on("click", function (e) {
  if($(this).attr("data-requirement") !== "accepted"){
    e.preventDefault();
    
    // Change the attribute value for "pending"
    $(this).attr("data-requirement", "pending")
    
    // Show files-info-wrapper
    $("#files-info-wrapper").show();
  }
});

// The confrim click handler
$(document).on("click", "#confirm", (ev) => {
  
  // Lookout for the "pending" input
  let pending = $('input[type="file"][data-requirement="pending"]')
  
  // Change the attribute value and trigger a click
  pending.attr("data-requirement", "accepted").trigger("click");
  
  // Hide files-info-wrapper
  $("#files-info-wrapper").hide();
});

span {
  display: block;
}

#files-info-wrapper {
  display: none;
  height: 150px;
  width: 200px;
  background: blue;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
#confirm {
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="add-office">
  <span>Logo</span>
  <input type="file" name="logo" accept="image/x-png,image/gif,image/jpeg"></span>
  <span>Cover photo</span>
  <input type="file" name="cover_photo" accept="image/x-png,image/gif,image/jpeg"></span>
  <span>To download</span>
  <input type="file" name="files[]" accept=".pdf,.doc,.docx" multiple></span>
  <span>Gallery</span>
  <input type="file" name="photos[]" accept="image/x-png,image/gif,image/jpeg" multiple>
</div>

<div id="files-info-wrapper">
  <p>Requirements</p>
  <p>Your file must be max 2MB</p>
  <a href="#" id="confirm">Okay</a>
</div>