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

Question

我想打开窗口按钮点击上传图像，但我收到此错误：

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

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关键字，从而减少冗长。