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']

score 1 · Accepted Answer · answered Nov 30 '15 at 12:31

1

You can use this:

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

answered Nov 30 '15 at 12:31

Jai

71,335
12
70
93

Oh thank you! You answered what I was looking for, but is there a way to retrieve the path as well? – bestprogrammerintheworld Nov 30 '15 at 12:34
1

No. Where the user decides to store a file on their own file system is not something that any *web* app needs to know. – Quentin Nov 30 '15 at 12:43
I need the full path for previewing the selected pic. – bestprogrammerintheworld Nov 30 '15 at 12:57
1

@bestprogrammerintheworld — No, you don't. http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded (see also http://xyproblem.info/ ) – Quentin Nov 30 '15 at 13:12
Ok I understand by @Mohd Abdul Mujib answer that I could use readURL() but I didn't manage the code to work as I expected. Thank you very much! – bestprogrammerintheworld Nov 30 '15 at 13:18

score 1 · Answer 2 · answered Nov 30 '15 at 12:41

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.

How can I get the seletced filename from file button?

2 Answers2