Get upload file name into textbox using jquery

Question

I am trying to get the filename of the uploaded file into a textbox via jquery. It should be easy enough if there is single file upload button.

But I have file input as an array and beside each file upload button there is a textbox.

I have created a fiddle which will demonstrate more clearly. The problem is I can't get the value/name of the selected file on change function.

$('.imgupload').on('change', function (e) {
    var filenames = [].slice.call(e.target.files).map(function (f) {
        alert(f.name);
        return f.name;
    });
    $('#filename').val(filenames);
});

JSFiddle -- http://jsfiddle.net/squidraj/Ldcp7hoc/4/

Dan · Accepted Answer · 2014-08-16 19:36:58Z

3

You are close, but there is no input with id="filename", you do have filename1, filename2 and data-id variables. So just grab the data-id and give the corresponding input (first, second, etc.) the value equal to your var filename which you were getting correctly.

$('#ques_32\\[\\]').on('change', function (e) {
    var filename = [].slice.call(e.target.files).map(function (f) {
        return f.name;
    });
    $('#filename' + $(this).attr("data-id")).val(filename);
});

Updated Fiddle

By the way you had a typo in your fiddle, wrote dataid instead of data-id

edited Aug 16, 2014 at 19:36

answered Aug 16, 2014 at 18:05

Dan

9,4885 gold badges44 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raj Over a year ago

Hey Dan...that's awesome. Brilliant!! Thanks a lot for saving my rest of the night :p

Collectives™ on Stack Overflow

Get upload file name into textbox using jquery

1 Answer 1

Updated Fiddle

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related