未捕获引用错误:未在HTMLInputElement.onchange中定义readURL

Question

我试图将图像元素的src更改为以文件形式上传的图像，但是，当我选择图像时，我会得到错误Uncaught ReferenceError: readURL is not defined at HTMLInputElement.onchange，并且图像元素的src不会更改。

HTML

<div class="new-avatar-container">
<img class='new-avatar-picture' src='{{url("storage/uploads/profile_pictures/edited/".$user->image_file_name)}}'>
<div class="upload-btn-wrapper">
<button class="btn">Upload a new avatar</button>
<input class='new-avatar' type="file" name="file" onchange="readURL()">
</div>
</div>

Javascript

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.profile-container-picture').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".new-avatar").change(function() {
readURL(this);
});

Answer 1

如果您使用相同的函数名来表示不同的函数名，那么它也会发生

Answer 2

尝试在中添加您的函数

$(document).ready(function(){
readURL = function(input) {}
});

当你试图称之为时，也许你的功能不存在