How to make a file input field?

Question

In the HTML form, I have a file field similar to this:

<div class="filefield"> <input type="file" name="myfile" id="fileinput"> </div> 

It displays a button and some text other than a button. If the file has not yet been selected, the text: No file chosen . If a file is already selected, it displays the file name.

This text is displayed on the right side of the button. I want it to appear under the button. I tried a lot of things in CSS and nothing works, No file chosen always displayed on the right side of the button, even if both the div and the input are given fixed widths only widths like a button, and fixed heights high enough for a button and two lines of text , the text is still displayed on the right, outside the div, and not below where the space inside the div is. How to make the text appear under the button?

Answer 1

You can take a peek at jQuery and some of the downloadable file plugins that can help you "reinstall" the input essentially by hiding it and activating / displaying the user-selected information in html.

http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/

http://www.uploadify.com/demo/

http://www.plupload.com/example_queuewidget.php

http://blogs.bigfish.tv/adam/2009/06/14/swfupload-jquery-plugin/

Answer 2

With @Guffa's answer showing that you cannot communicate with this field, you can create a hack around it.

What about a button element that acts as a file browser button on a click? And then the span element that contains the value of this entry in the file browser? It will be some kind of js hacker, but it can solve the problem.

EDIT

Working example: http://jsfiddle.net/nmeAW/1/

Edit 2

An even better working example: http://jsfiddle.net/nmeAW/2/

Answer 3

You can not. A file input field is one control, even if it looks like several controls that can be controlled separately.

In addition, how file entry control is displayed depends entirely on which browser you are using. This phenomenon is not specified in the standards, so any browser provider can display it as it sees fit.