未捕获ReferenceError：未定义onchange函数

Question

I am trying to upload an image and check whether this is a valid image with a Javascript function.

 function validateImage() { var formData = new FormData(); var file = document.getElementById("img").files[0]; formData.append("Filedata", file); var t = file.type.split('/').pop().toLowerCase(); if (t != "jpeg" && t != "jpg" && t != "png" && t != "bmp" && t != "gif") { alert('Please select a valid image file'); document.getElementById("img").value = ''; return false; } if (file.size > 1024000) { alert('Max Upload size is 1MB only'); document.getElementById("img").value = ''; return false; } return true; } 

 <form action="/upload" method="post" enctype="multipart/form-data"> Image<input type="file" name="upl" accept="image/*" onchange="validateImage()"><br> <input type="submit" value="Submit"> </form> 

The function validateImage() is not called and the next message is displayed:

Uncaught ReferenceError: validateImage is not defined at HTMLInputElement.onchange

Any idea?

Answer 1

You have no element with id="img" . Add the id or choose a different method to select the file input in your JS code.

 function validateImage() { console.log("validateImage called"); var formData = new FormData(); var file = document.getElementById("img").files[0]; formData.append("Filedata", file); var t = file.type.split('/').pop().toLowerCase(); if (t != "jpeg" && t != "jpg" && t != "png" && t != "bmp" && t != "gif") { alert('Please select a valid image file'); document.getElementById("img").value = ''; return false; } if (file.size > 1024000) { alert('Max Upload size is 1MB only'); document.getElementById("img").value = ''; return false; } return true; } 

 <form action="/upload" method="post" enctype="multipart/form-data"> Image<input id="img" type="file" name="upl" accept="image/*" onchange="validateImage()"><br> <input type="submit" value="Submit"> </form>