Button to show choose a file to upload dialog box

问题

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?

回答1:

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

回答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.. :)

回答3:

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.

回答4:

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: