Question

尝试使用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>

Answer 1

问题是因为click元素上的.file-upload事件冒泡直至.upload-button并被click处理程序捕获，该处理程序触发了{{ 1}}最多会冒起.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();
  });
});

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

1 个答案: