Uncaught RangeError: Превышен максимальный размер стека вызовов (jquery-1.12.4) - PullRequest
Новая
       40

Uncaught RangeError: Превышен максимальный размер стека вызовов (jquery-1.12.4)

0 голосов
/ 04 марта 2019

Попытка загрузить файл изображения с предварительным просмотром с помощью Jquery.Это работает, и я получил предварительный просмотр, но когда я нажал на кнопку загрузки, я увидел сообщение об ошибке

Uncaught RangeError: Максимальный размер стека вызовов превысил

в консоли.

Вот код: 

$(document).ready(function() {
  var readURL = function(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $('.profile-image').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  $(".file-upload").on('change', function() {
    readURL(this);
  });

  $(".upload-button").on('click', function() {
    $(".file-upload").click();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <img class="profile-image" src="demo.png" alt="Profile Image">
  <a class="profile-img-edit upload-button">
    <i class="fas fa-camera"></i> Select Image
    <input class="file-upload" type="file" name="file" size="40" accept=".png, .jpg, .jpeg, .gif">
  </a>
</div>

1 Ответ

0 голосов
/ 04 марта 2019

Проблема в том, что событие click в элементе .file-upload всплывает до .upload-button и перехватывается обработчиком click, который запускает обработчик щелчка на .file-upload, который всплывает до .upload-buttonкоторый запускает щелчок ... и т. д.

Чтобы исправить это, остановите всплывающее событие из .file-upload, добавив к нему обработчик события click и вызвав stopPropagation() в event, вот так: 

$(document).ready(function() {
  var readURL = function(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $('.profile-image').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  $(".file-upload").on('change click', function(e) {
    e.stopPropagation();
    readURL(this);
  });

  $(".upload-button").on('click', function() { 
    $(".file-upload").click();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <img class="profile-image" src="demo.png" alt="Profile Image">
  <a class="profile-img-edit upload-button">
    <i class="fas fa-camera"></i> Select Image
    <input class="file-upload" type="file" name="file" size="40" accept=".png, .jpg, .jpeg, .gif">
  </a>
</div>
...