未捕获的 RangeError：超出最大调用堆栈大小（jquery-1.12.4）答案

【问题标题】：Uncaught RangeError: Maximum call stack size exceeded (jquery-1.12.4)未捕获的 RangeError：超出最大调用堆栈大小（jquery-1.12.4）
【发布时间】：2019-03-04 13:41:56
【问题描述】：

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

未捕获的 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>

【问题讨论】：

标签： javascript jquery file-upload

【解决方案1】：

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

要解决此问题，请通过向其添加click 事件处理程序并在event 上调用stopPropagation() 来阻止事件从.file-upload 冒泡，如下所示：

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

【讨论】：