javascript - 未捕获的范围错误 : Maximum call stack size exceeded (jquery-1. 12.4)

Question

尝试使用 Jquery 上传带预览的图像文件。它工作正常，我得到了预览，但是当我点击上传按钮时，我看到了一条错误消息

Uncaught RangeError: Maximum call stack size exceeded

在控制台中。

---

代码如下:

$(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>

Answer 1

问题是因为 .file-upload 元素上的 click 事件冒泡到 .upload-button 并被click 处理程序，它触发 .file-upload 上的点击处理程序，该处理程序冒泡到 .upload-button 触发点击...和等等。

要解决此问题，请通过向其添加 click 事件处理程序并调用 stopPropagation()< 来阻止事件从 .file-upload 冒泡 在 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>