Get input file value into textbox

Question

Onclick a button I get a file input box as array.

<input type='button' class='tiny button radius' value='+' id='addButton' data-id='".$v->quid."' data-role='image'>




 $("#addButton").click(function () {

        var newTextBoxDiv = $(document.createElement('div'));
        newTextBoxDiv.after().html('<div class="row">
<div class="large-4 columns left button-mar-top-btm">
<label class="tiny button radius multipleimg">
<input type="file" name="ques_'+quid+'[]' + '" id="ques_'+quid+'[]' + '">Upload Photo</label> </div>
<div class="large-6 columns button-mar-top-btm">
<input class="file-upload-input" type="text"></div>
<div class="large-2 left columns button-mar-top-btm">
<a href="#" class="removeField" >Remove</a></div></div>');
        });

so the above code will generate the input box with name 'ques_32[]' multiple times.

What I am trying to do is to put the chosen file value in a textbox on each click.

If it's about images you might be interested in: http://stackoverflow.com/questions/12570834/how-to-preview-image-get-file-size-image-height-and-width-before-upload — Roko C. Buljan, Aug 04 '14 at 18:17

score 2 · Accepted Answer · answered Aug 04 '14 at 18:16

2

It's actually as easy as just binding the change event on the file input, get the value and set it on a text input.

$('#ques_32\\[\\]').on('change', function() {
    $('#filename').val(this.value)
});

You won't get the real path for security reasons, so you'll end up with something like /fakepath/filename.png etc.

For multiple files and to just get the filenames, as you can't get the path anyway, you can do something like

$('#ques_32\\[\\]').on('change', function(e) {
    var filenames = [].slice.call(e.target.files).map(function(f) {
        return f.name;
    }).join(', ')

    $('#filename').val(filenames);
});

FIDDLE

answered Aug 04 '14 at 18:16

adeneo

312,895
29
395
388

Thanks a lot for showing the path. It worked great.Only one problem is I have the input field as array now it is not detecting which file is clicked. – Raj Aug 04 '14 at 18:35
You'll have to explain that better? In an array how exactly, and detect each file how ? – adeneo Aug 04 '14 at 18:38
Now it's changed.Basically the file input can be more than one so how it can detect which input has been clicked. – Raj Aug 04 '14 at 18:49
You'll have to target each one, or all of them with a class etc ? – adeneo Aug 04 '14 at 19:16
That's what I am thinking for last 4 hrs....there will be a common class and onclick that class it will take the id of that particular file and then get the filename and put it in another textbox with same id. – Raj Aug 04 '14 at 19:27
Note that you can only use an ID once, duplicate ID's is invalid. You can use a class on all the file inputs, and then target a text input based on DOM position, index or just about anything else really. – adeneo Aug 04 '14 at 19:28
Will try it tomorrow. – Raj Aug 04 '14 at 19:32

score 0 · Answer 2 · answered Aug 04 '14 at 18:12

0

It is possible using HTML5 (i.e, not supported on older browsers): See http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

answered Aug 04 '14 at 18:12

MrTux

32,350
30
109
146

Get input file value into textbox

2 Answers2