问题描述
尝试使用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>
1楼
问题是因为.file-upload元素上的click事件冒泡到.upload-button并被click处理程序捕获，这会触发.file-upload上的click处理程序，该事件会冒泡到.upload-button并触发一个单击...等等。
要解决此问题， click通过向其添加click事件处理程序并在该event上调用stopPropagation()来阻止该事件从.file-upload冒泡，如下所示：
$(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(); }); });
<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>