Display confirmation when file has been selected in HTML input field

Issue

I have a standard input field:

<input type="file">

in my form, but I have it hidden so that I can use my own image for the button (as seen in many answers on stackoverflow)

But when using this method, there's no confirmation given to the user that their file was selected, because the standard input box is hidden and so they never see the filename.

So my question boils down to this: How can I detect that a file has been selected, and then display something on the page (not an alert box)? Ideally I just want to show a little icon or some text saying "file selected".

Jquery is fine but if there's a way to do this without it, I'd much prefer that. Thanks!

Solution

This is a pretty easy way to do it without using Jquery. You will have to change the id's to match your html of course.

Here is a link to a jsfiddle example: http://jsfiddle.net/larryjoelane/rrns0k4e/1/

HTML Part:

<input id="file-select" type="file">

<div id="file-selected"></div>

Javascript Part:

//on change event listener for #file-select
document.getElementById("file-select").onchange = function() {

    //call getFileSelected method
    getFileSelected();

};

function getFileSelected(){

    //get the value of the input file element
    var getFileSelected = document.getElementById("file-select").value;

    //display the results of the input file element
    //you can append something before the getFileSelected value below
    //like an image tag for your icon or a string saying "file selected:"
    //for example.
    document.getElementById("file-selected").innerHTML = getFileSelected;

}

Answered By - Larry Lane