Button to show choose a file to upload dialog box

Question

Instead of using an input type=\"file\" html tag, is it possible to bring up a choose a file to upload dialog box by clicking a input type=\"but

Answer 1

It is not possible to alter an input[type=file] as you like, it is a purely native form element.

Besides you won't be able to get the path to the file for security reasons. Old IE versions shows the path but it is not the case anymore with newer versions and you won't be able to do anything with the path on server-side anyway.

There are though some methods to style:

• Styling File Upload / Select Input Control
• Styling an input type="file"
• Styling file inputs with CSS and the DOM

Answer 2

<input type="file" style="display:none;" id="inputfile"/>
<a href="javascript:document.getElementById('inputfile').click(); ">try this</a>

Try this one. I think it is useful.. :)

Answer 3

Have a look at plupload, I've used it many times to handle file uploading.

Answer 4

Check this fiddle: http://jsfiddle.net/A4BS7/1/

NOTE:

a) This may not work well on older browsers (mainly IE) that don't fire the change event on the file input.

b) For the upload to work as expected, you'll need to include the <input type="file"> element in your form. The text element can be used for displaying the selected file at best.

Answer 5

I think most browsers have this locked down for security purposes. Buttons and text boxes can be manipulated via JavaScript. File input boxes cannot, and for good reason; imagine if a javascript could open a dialog, set the path to a sensitive file on your system, then simulate the button click to download the file!

---

By the way, if you are looking to style it, perhaps this would work: http://www.quirksmode.org/dom/inputfile.html