Populate text field from file select

Question

Is it possible to fill the text box with the file name that is selected in file upload?

<script type="text/javascript">
var textbox = document.getElementById('fiil');
var fileselect = document.getElementById('uploadData');

fileselect.onchange = function(){
      textbox.value = textbox.value  + this.value; //to appened
     //textbox.innerHTML = this.value; 
}

here is my html code:

<form  id="upload" name="upload" action="<?php echo base_url(); ?>index.php/welcome/upload_gen048" method="POST" class="form-horizontal" enctype="multipart/form-data" onsubmit="return verify_upload()" >
<div class="col-lg-4"></div>
<b style=" padding:.3em; font-size:15px;color:white"> </b><input style="border:1px solid" type="text" onfocus="true"  name="fiil" id="fiil" value=""size="30" />
<input type="file" name="uploadData" id="uploadData" style=""/>

Just a heads up: you'll notice odd behaviour (ie: "fake" being in the textbox) when using this method in IE. — camelCase, Jan 14 '16 at 01:20
Possible duplicate of [Use jQuery to get the file input's selected filename without the path](http://stackoverflow.com/questions/6365858/use-jquery-to-get-the-file-inputs-selected-filename-without-the-path) — Mariano Montañez Ureta, Jan 14 '16 at 01:31
That's weird @PhiterFernandes you are right its working, but I dont know why it is not working on my page, I double check the name and IDs if there is a duplicate but there is none. anyways I already found the answer somewhere. thanks to Phiter for that site that you gave I can use it in the future. Can I add an answer to my post? because I have the working code now. — Vince Osana, Jan 14 '16 at 01:37
You absolutely can, make it clear and perhaps your answer will be of usage for other users in the future. — Phiter, Jan 14 '16 at 01:38
Thanks a lot guys~! I learned a lot from this site and it has a good community, back to my project now. :) — Vince Osana, Jan 14 '16 at 01:47

score 0 · Accepted Answer · edited Jan 14 '16 at 10:42

0

Here is my update:

<script type="text/javascript">
var textbox = document.getElementById('fiil');
var fileselect = document.getElementById('uploadData');

function fileSelect()
{
    var x =  document.getElementById('uploadData').value;
    var fileName = x.match(/[^\/\\]+$/);

    document.getElementById('fiil').value = fileName;
}

I just added onChange="fileSelect() in the input file here:

<form  id="upload" name="upload" action="<?php echo base_url(); ?>index.php/welcome/upload_gen048" method="POST" class="form-horizontal" enctype="multipart/form-data" onsubmit="return verify_upload()" >

<div class="col-lg-4"></div>
<b style=" padding:.3em; font-size:15px;color:white"> </b>
<input style="border:1px solid" type="text" onfocus="true"  name="fiil" id="fiil" value=""size="30" />

<input type="file" name="uploadData" id="uploadData" onChange="fileSelect();" style=""/>

edited Jan 14 '16 at 10:42

David Ferenczy Rogožan

18,863
8
68
65

answered Jan 14 '16 at 01:45

Vince Osana

396
3
19

If it solves your question, mark it as the answer, please. – David Ferenczy Rogožan Jan 14 '16 at 02:05
it says that you can accept your own answer in 2 days, that is why I still can mark a check :( sorry – Vince Osana Jan 14 '16 at 02:53
I see. So just don't forget to do it, please. It'll help others. – David Ferenczy Rogožan Jan 14 '16 at 10:36
1

BTW I have removed commented code out of your answer. Code in the questions and answers should be short, clear and contain only related things. – David Ferenczy Rogožan Jan 14 '16 at 10:48

Populate text field from file select

1 Answers1