Событие img.onload срабатывает несколько раз

Question

Есть input type="file" accept="image/*". При выборе картинки она отображается в img src="" id='preloadimg'. Если несколько раз подряд выбирать файл, то onload происходит тоже несколько раз и по моему коду несколько раз срабатывает alert. Как сделать, чтобы onload сработало только один раз? Вот код:

<input type="file" name="image" accept="image/*" id="ifile"><br>
<img src="" alt="Image preview..." id='preloadimg'>
<script>
$('#ifile').on('change', function () {
    $('#preloadimg').on('load', function (e) { 
        if(this.naturalWidth < 200 || this.naturalHeight < 200){
            URL.revokeObjectURL($('#preloadimg').attr('src'));
            $('#ifile').val('');
            alert('Изображение должно быть не меньше 200px х 200px');
            return false;
        }
    });

    $('#preloadimg').attr('src', URL.createObjectURL(this.files[0]));
});
</script>

Answer 1

Вы на каждое изменение файла накидываете сверху еще один обработчик onload

$('#preloadimg').hide();
$('#ifile').on('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    $('#preloadimg').attr('src', URL.createObjectURL(file));
  }
});

$('#preloadimg').on('load', function(e) {
  if (this.naturalWidth < 200 || this.naturalHeight < 200) {
    URL.revokeObjectURL($('#preloadimg').attr('src'));
    $('#ifile').val(null);
    $('#preloadimg').attr('src', '');
    $('#preloadimg').hide();
    alert('Изображение должно быть не меньше 200px х 200px');
    return false;
  }
  $('#preloadimg').show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="image" accept="image/*" id="ifile"><br>
<img src="" alt="Image preview..." id='preloadimg'>

БЛОГ НА HUSL

Событие img.onload срабатывает несколько раз

Ответы (1 шт):