Question

我想打开窗口以在单击按钮时上传图像，但是出现此错误：

未捕获的RangeError：超出最大调用堆栈大小Eximum

jQuery('.upload-wrap-div').click(function(e) {
  jQuery("input[type='file']").trigger('click');
})

jQuery("input[type='file']").change(function() {
  jQuery('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group files text-center upload-wrap-div" ref="fileform">
  <input type="file" name="img" multiple style="display:none">
  <span id='val'></span>
  <a class="btn" id='button'>Upload Photo</a>
  <h6>DRAG & DROP FILE HERE</h6>
</div>

Answer 1

这是因为您要在click事件处理程序中触发click事件，从而创建一个无限循环。

要解决此问题，请将容器div更改为label。这样一来，您就不需要click处理程序，因为将焦点放在内部表单控件上是默认的label行为。试试这个：

jQuery(function($) {
  $("input[type='file']").change(function() {
    $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="form-group files text-center upload-wrap-div" ref="fileform">
  <input type="file" name="img" multiple style="display:none">
  <span id='val'></span>
  <a class="btn" id='button'>Upload Photo</a>
  <h6>DRAG &amp; DROP FILE HERE</h6>
</label>

还要注意document.ready处理程序中$的别名使用。这样可以避免在代码中使用jQuery关键字，从而使其不再那么冗长。

在Fileupload上超出最大调用堆栈大小

1 个答案: