Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide text field in Html File Upload

Tags:

html

css

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

for example

<input type="file" name="somename" size="chars">  

This generates obviously a text field and next to that field is a browse button... I want to hide the text field part but keep the button.

like image 943
dswatik Avatar asked Jan 09 '10 20:01

dswatik


People also ask

How do I restrict Upload in HTML?

As mentioned in previous answers we cannot restrict user to select files for only given file formats. But it's really handy to use the accept tag on file attribute in html. As for validation, we have to do it at the server side. We can also do it at client side in js but its not a foolproof solution.


2 Answers

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();" /> 
like image 145
shiba Avatar answered Sep 28 '22 03:09

shiba


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).

like image 42
Josh Anderson Avatar answered Sep 28 '22 03:09

Josh Anderson