How can I get the seletced filename from file button?

Question

I wanted to try using a link to trigger a hidden input file button, but after I click the link I want to get the selected file.

css

{#upload {display:none;}}

jQuery

$(".file-image").on('click', function(e){
    e.preventDefault();
    $("#upload:hidden").trigger('click');
   console.log($("#upload"));             
});

html:

<a href="#" class="file-image">Add image</a>';
<input id="upload" type="file"/>';

How can I get the value of the selected filename of the the upload-button?

In the console I see that object is like

[input#fileupload, context:document, selector: "#upload"]
[0]: input#upload
...
...

value: c:\temp\file.jpg //and this value seems to be correct
...

I tried with $("#upload")[0]['value']

Answer 1

What you need is readAsDataURL method of the FileReader() Object.

This is the function that I had used, you can draw the refrences...

        function readURL(input) {

            num = jQuery(input).attr("data-opti");
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {

                    jQuery('#preview' + num).attr('src', e.target.result);
                    var logoHeight = jQuery('#preview' + num).height();
                    if (logoHeight < 104) {
                        var margintop = (104 - logoHeight) / 2;
                        jQuery('#preview' + num).css('margin-top', margintop);
                    }
                }

                reader.readAsDataURL(input.files[0]);
            } else {
              // no files selected it seems
            }
        }
        jQuery(".imageinput").change(function () {
            readURL(this);
        });

This can be used to show a preview of the image even before the file has been uploaded, so it is a pretty nifty feature to enhance the UX.

Answer 2

You can use this:

$("#upload")[0].files;