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

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>