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="button"? Then when a file is selected from the choose a file to upload dialog box, the file path gets inserted into a regular html input type="text" tag?
I've seem that gmail does something similar but not with buttons and text inputs, they simply have a link add file or something like that. When that link is clicked, it shows the select file(s) to upload by mail.google dialog box. When a file is clicked, the file name is shown on the screen.
How are they doing that?
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="button"? Then when a file is selected from the choose a file to upload dialog box, the file path gets inserted into a regular html input type="text" tag?
I've seem that gmail does something similar but not with buttons and text inputs, they simply have a link add file or something like that. When that link is clicked, it shows the select file(s) to upload by mail.google.com dialog box. When a file is clicked, the file name is shown on the screen.
How are they doing that?
Share Improve this question edited Jan 24, 2012 at 6:45 Cheran Shunmugavel 8,4591 gold badge35 silver badges40 bronze badges asked Jan 23, 2012 at 16:05 oshirowanenoshirowanen 15.9k83 gold badges203 silver badges356 bronze badges 1- 1 If you right click on "Attach a file" in Gmail you'll see that they did that with Flash. – aknosis Commented Jan 23, 2012 at 16:22
5 Answers
Reset to default 7<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.. :)
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
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.
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
Have a look at plupload, I've used it many times to handle file uploading.