Button for selecting file selection for loading dialog box

Question

Instead of using the input type="file" html tag, is it possible to open the choose a file to upload dialog box by pressing input type="button" ? Then, when a file is selected from the choose a file to upload dialog box, the file path is inserted into the regular html input type="text" tag?

It seems that gmail does something similar, but not with buttons and text inputs, they just have an add file link or something like that. When this link is clicked, the select file(s) to upload by mail.google.com dialog box select file(s) to upload by mail.google.com . When you click on a file, the file name is displayed on the screen.

How do they do it?

Answer 1

I think most browsers are blocked for security reasons. Buttons and text fields can be manipulated using JavaScript. File input boxes cannot and for good reason; imagine if javascript can open a dialog, set the path to a sensitive file on your system, and then simulate a click button to download the file!

---

By the way, if you are looking for style, maybe this will work: http://www.quirksmode.org/dom/inputfile.html

Answer 2

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

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

Answer 3

Check out this script: http://jsfiddle.net/A4BS7/1/

Note:

a) This may not work well in older browsers (mainly IE) that do not trigger a change event on file input.

b) In order for the download to work properly, you need to include the <input type="file"> element in your form. A text element can be used to display the selected file at best.

Answer 4

It is impossible to change input[type=file] on your own; it is a purely native form element.

In addition, you will not be able to get the file path for security reasons. Older versions of IE show the path, but it no longer applies to newer versions, and you still can’t do anything from the path on the server side.

There are some methods for style:

• Download / Select Style File to Manage
• Styling input type = "file"
• Insert files with CSS and DOM

Answer 5

Look at plupload , I used it many times to handle file uploads.