Блог

Главная - Вопросы по программированию - Приостановка загрузки файла, отображение модального окна, продолжение загрузки

Приостановка загрузки файла, отображение модального окна, продолжение загрузки

#javascript #jquery #file-upload

Вопрос:

Я хотел бы приостановить загрузку файлов, показать требования к файлам, а затем продолжить. Пример: пользователь нажимает «загрузить файл», я показываю ему модальное окно с подробной информацией о файле, который он должен загрузить, он нажимает «ОК», затем я показываю ему всплывающее окно для выбора файла с его компьютера.

Проблема в том, что, когда он переходит ко второму входу загрузки, браузер открывает окно для выбора файла, который он назначает первому входу, и сразу же открывает другое окно для выбора второго файла. Таким образом, при 4-м вводе пользователь должен выбрать 3 файла, которые он уже выбрал, а затем, наконец, четвертый.

Функция триггера всегда проходит через все мои входы.

Я попробовал ev.stopPropagation, $(this).off(«щелчок»), вернуть 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>

Спасибо за помощь

Комментарии:

1. Пожалуйста, сделайте свой фрагмент доступным для выполнения.

2. @LouysPatriceBessette, все готово, обратите внимание, как, когда вы хотите загрузить второй ввод (например), вы получаете два всплывающих окна, чтобы заполнить первый ввод, а затем второй.

Ответ №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>
Метки: , ,