jquery - 文件上传超出最大调用堆栈大小

Question

我想打开窗口以在单击按钮时上传图像，但收到此错误:

Uncaught RangeError: Maximum call stack size exceededEximum

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