Событие ввода для типа файла, не запускаемого в браузере Safari

Question

Я загружаю файл, используя AJAX и jQuery. Это хорошо работает в Chrome и Firefox, но проблема, которую я получаю, в Safari. Я попытался отладить это, но отладчик не остановился, когда я загружал файл.

<input type="file" class="file_input" name="myfile"/>

$(document).on('input', '.file_input', function() {
  var that = $(this);
  var formData = new FormData();
  formData.append("userfile", this.files[0]);
  showLoader();

  $.ajax({
    cache: false,
    headers: {
      'X-CSRF-Token': _token
    },
    url: base_url + "controller/action",
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    success: function(data) {
      that.closest('tr').find('.document').empty();
      hideLoader();
    }
  });
});

Answer 1

Safari не поддерживает событие input для file элементов ввода:

(Safari и некоторые другие браузеры) не запускают событие ввода при (не) установке флажка илипереключатель или при изменении выбранного файла (ов). См. Ошибка Chrome, ошибка WebKit и ошибка Firefox

https://caniuse.com/#feat=input-event

Чтобы исправить это, вместо этого можно использовать более широко поддерживаемое событие change:

$(document).on('change', '.file_input', function() {
  // your code...
});

Answer 2

Попробуйте установить атрибут ввода на вашем входе. Таким образом, лучший способ действий здесь - возможно, добавить как MIME, так и расширения на входах.

<input
    type="file"
    id="attachments" 
    accept="application/msword,image/gif,image/jpeg,application/pdf,image/png,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/zip,.doc,.gif,.jpeg,.jpg,.pdf,.png,.xls,.xlsx,.zip" 
    name="myfile"
    class="file_input"
>