未捕獲的RangeError：超出最大調用堆棧大小（jquery-1.12.4）

Question

嘗試使用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> 

Answer 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>