How to hide text field in Html File Upload

Question

I am wondering how to hide the text field portion of a standard html file upload tag

for example

Answer 1

You could possibly hide the whole element and show a button or link instead. This is rather easy.

<input type="file" name="file" id="fileupload" style="width:200px; display:none;" onchange="submitmyform();" />
<input type="button" value="Select an Image" onclick="$('#fileupload').click();" />

The file upload element is hidden. The button will fire the click event and shows the file browser window. On selecting a file, the change event is fired and this can submit a form or call a script function, whatsoever.

Hope this helps...

Answer 2

This will surely work i have used it in my projects.I hope this helps :)

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Answer 3

You can put an image as a background for the button. That worked for me, a while ago.

Answer 4

The file input button is extremely difficult to style and manipulate, mainly for security reasons.

If you really need to customize your upload button, I recommend a Flash based uploader like SWFUpload or Uploadify that enables you to use a custom image as button, display a progress bar, and other things.

However, its basic philosophy differs from just embedding a control into a form. The uploading process takes place separately. Make sure you check out first whether this works for you.

Answer 5

DEMO

Pure css and html

The trick is to use a button above the input file button.

Plus, you should set

filter: alpha(opacity=0);

to the input file.

Answer 6

I'd recommend hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.

You can do this with CSS and javascript -- check out this article (actually the second time I've used this reference today).