I am trying to attach an event lister to a file input. I was thinking it would work like this. But i have read online and cant seem to get it to work.
<input type="file" id=image1 >
var image1 = document.getElementsByID("image1");
image1.addEventListener('change', alert(1));
Change this:
var image1 = document.getElementsByID("image1");
image1.addEventListener('change', alert(1));
to this:
var image1 = document.getElementById("image1");
image1.addEventListener('change', function(){ alert(image1); });
Because getElementsByID() is not a valid method call, but getElementById() is.
Also, so that you will be executing a function that invokes the alert(), rather than invoking the alert immediately and assigning the result of the alert as the click event handler, we need to wrap the alert() in a function.
Lastly, alert(1) doesn't show anything because 1 isn't a variable, nor is it a string. You should be writing alert(image1.someProperty). Since image1 is a file type, you could access the files associated with the element and then a specific file and then an aspect of that file.
Here's the whole thing:
var image1 = document.getElementById("image1");
image1.addEventListener('change', function(){
var files = image1.files;
alert(files[0].name);
});<input type="file" id=image1 >
Try this:
var input = document.getElementsByTagName('input')[0];
input.onclick = function () {
this.value = null;
};
input.onchange = function () {
alert(this.value);
};<input type='file' value='C:\fakepath' />
<input type="file" id="image1" onchange="alert(1);" />
