How to rename the browse button as "Select the file"? E.g.:
<input type=file name=browse >
+2
A:
The input type="file" field is very tricky because it behaves differently on every browser, it can't be styled, or can be styled a little, depending on the browser again; and it is difficult to resize (depending on the browser again, it may have a minimal size that can't be overwritten).
There are workarounds though. The best one is in my opinion this one (the result is here).
FWH
2009-07-22 07:47:44
A:
No, you can't change file upload input's text. But there are some tricks to overlay an image over the button.
Canavar
2009-07-22 07:48:06
+7
A:
The button isn't called the "browse button" — that's just the name your browser gives for it. Browsers are free to implement the file upload control however they like. In Safari, for example, it's called "Choose File" and it's on the opposite side of whatever you're probably using.
You can implement a custom look for the upload control using the technique outlined on QuirksMode, but that goes beyond just changing the button's text.
Chuck
2009-07-22 07:50:39
A:
You can also use Uploadify, which is a great jQuery upload plugin, it let's you upload multiple files, and also style the file fields easily. http://www.uploadify.com
dande
2009-07-22 07:54:04
+2
A:
A bit of JavaScript will take care of it:
<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
var fileinput = document.getElementById("browse");
fileinput.click();
var textinput = document.getElementById("filename");
textinput.value = fileinput.value;
}
</script>
<input type="file" id="browse" name="fileupload" style="display: none"/>
<input type="text" id="filename" readonly="true"/>
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/>
Not the nicest looking solution, but it works.
korona
2009-07-22 07:54:21
You should use id for your javascript. 'name' is used only when submitting the form.
xav0989
2009-07-22 08:01:24
D'oh. Fixed, thanks.
korona
2009-07-22 08:42:33
This will be completely unusable is JS is not available. (The HTML is invalid too).
David Dorward
2009-07-22 08:50:43
@David Dorwad: Thanks for pointing out the obvious (that JS doesn't work when JS is not available). The real-world case were this would happen is extremely rare though.Also, I didn't intend for anyone to blindly copy and paste this and use it straight away, it was intended as a pointer to show one possible way of achieving the goal at hand. But hey, thanks for deterring me from posting again.
korona
2009-07-22 09:13:30
The point is that the HTML doesn't work if the JS is not available. A decently written solution would degrade gracefully and not fall back to a position where there was a button which did nothing.
David Dorward
2009-07-22 13:22:38