0

Hi I have currently custom 2 button called Browse and Import. I also have a input type as a text. My question is how i can browse and select a record and place in input type text

Please advise

<input type="button" id="btnBrowse" value="Browse" onclick="document.getElementById('fileID').click(); return false" style="height:31px; font-size:14px; background-color:#3399FF" class="k-button" />
       <input type="submit" id="btnSubmit" value="Import" style="height:31px; font-size:14px; background-color:#3399FF" class="k-button" />
       <input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
Supermode
  • 924
  • 3
  • 32
  • 53
  • Don't programmatically click a file input element. It looks like you are trying to do that here. You will run into security exceptions in IE when you try to actually send the file to the server via js. – Ray Nicholus Mar 07 '13 at 03:19

3 Answers3

3

You can however customize nearly any other html element. Here is a complete solution:

<input id="btn" type="file" style="display:none;" onchange="document.getElementById('file').value=this.value.substring(this.value.lastIndexOf('\\')+1);">

<input id="file" type="text" style="width:200px;">

<input type="button" onclick="document.getElementById('btn').click();" value="click me" />
iGanja
  • 2,374
  • 2
  • 28
  • 32
  • This is generally bad advice. You should never programmatically trigger an input file element. If you do so, and then submit the file to the server via javascript, IE will throw a security exception. Various versions of other browsers may prevent this as well. The only safe way to style a file input is via CSS, as I have mentioned in my answer. – Ray Nicholus Mar 07 '13 at 03:39
  • oh, for pete's sake, who said we were submitting via javascript? a submit button will work just fine here. Sometimes the simplest answer really is the best one. – iGanja Mar 07 '13 at 04:06
  • Hi iGanja, Actually, it said the selected file is null – Supermode Mar 07 '13 at 05:02
1

Of course you can style a file input button. This has been covered over, and over, and over again on SO. For example, Labeling file upload button.

Community
  • 1
  • 1
Ray Nicholus
  • 19,538
  • 14
  • 59
  • 82
  • 1
    Actually answer is (citation of Ray's link): It is normally provided by the browser and hard to change, so the only way around it will be a CSS/JavaScript hack. – Ulflander Mar 07 '13 at 03:15
  • @Ulflander That's correct, but I wouldn't say it's hard to change. I guess it's all relative. EDIT: I'm assuming you were referring to the CSS/JS required to style the button. – Ray Nicholus Mar 07 '13 at 03:16
  • 1
    That was a citation, but you're right, the "hard" part is about hacking it :) – Ulflander Mar 07 '13 at 03:19
  • WOW, I thought I was going to learn something new today, alas, no. The fact is it CANNOT be changed natively, as I said. There are, of course, countless ways to get around this. I posted one very simple method below. – iGanja Mar 07 '13 at 03:26
0

you can use

<input type="file"/>
PSR
  • 39,804
  • 41
  • 111
  • 151