上传文件 Uncaught RangeError: Maximum call stack size exceeded 报错问题解决

写了个上传文件

<div class="flex-center " id="mask">
    <div class="users-pic"><img id="avatar" src="{{$user_info['avatar']?$user_info['avatar']:'//www.biguotk.com/web/img/def_avatar.png'}}"  alt=""></div>
    <img class="goin" src="/new_web/wap/img/wode_jinru@2x.png" alt="">
    <input type="file" id="select_img" style="display: none" onchange="upload()">
</div>

报错

jquery.min.js:2 Uncaught RangeError: Maximum call stack size exceeded
at RegExp.test (<anonymous>)

 

报错原因：出现无限循环。
我的jq代码实现的是点击div时触发input的点击事件，但是这个input是被包裹在div内部的，所以input的点击事件触发后，通过事件冒泡又触发了div的点击事件，div的点击事件又去触发input的点击事件，input的点击事件再次冒泡触发div的点击事件……如此一来便造成了无限循环，所以报错：Maximum call stack size exceeded。

解决方法：将input移出div即可。

如 

<div class="flex-center" >
    <div class="users-pic" id="mask"><img id="avatar" src="{{$user_info['avatar']?$user_info['avatar']:'//www.biguotk.com/web/img/def_avatar.png'}}"  alt=""></div>
    <img class="goin" src="/new_web/wap/img/wode_jinru@2x.png" alt="">
    <input type="file" id="select_img" style="display: none" onchange="upload()">
</div>