How to check <input> tag is click or not?-CodePudding

I have a input tag like this :

<input type="file" id="excel_file"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
style="color:transparent; "/>

and the output:

What I trying to do is I want to check whether the Choose File button is clicked or not. I couldn't check with the same method like a normal button cause this choose file is not a button. Does anyone know how can I detect if user is clicking it or not ?

CodePudding user response：

If you just want to listen for the click event simply use the following:

const inputElement = document.getElementById('excel_file');
inputElement.addEventListener('click', () => {
    console.log('I was clicked');
}, false);

However, if you want to listen for the event of a file selection then you should you use 'change' instead of 'click'. The 'change' event will only trigger when a file is selected avoiding triggering your function if a user clicks the button then exits by clicking on cancel.

For more information: Using files from web applications