Html/CSS Upload File

Question

this is upload file code:

<form>
<input type="file" name="file"/>
</form>

It's appear a text box and BROWSE button to upload a file.

Well, But is there any way to upload a file by just click on "some" text, Example: "Upload your file" text. After click on this text then upload box will appear.

yes this is possible apply some css on the input tag and you are done — Jack
– Jack, Commented Apr 21, 2012 at 7:18

Nauphal · Accepted Answer · 2012-04-21 07:36:27Z

2

Try this

http://jsfiddle.net/RffbE/

<form>
<input type="file" name="file" id="file" style="display:none"/>
<span onclick="doTrick()">Upload your file</span>
</form>

and use this javascript function.

function doTrick() {
    document.getElementById('file').click();
}

edited Apr 21, 2012 at 7:36

answered Apr 21, 2012 at 7:30

Nauphal

6,1824 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jack · Accepted Answer · 2012-04-21 07:30:46Z

0

I guess you need this

Please see my jsfiddle

jsfiddle : http://jsfiddle.net/ks5r7/6/

    <html>
    <head>
        <script>
            function show()
            {
                document.getElementById('box').style.display='inline';
            }

        </script>
    </head>
    <body>
        <div id="show"><a href="#" onclick="show()">Upload my file</div>

        <div id="box" style="display:none";><input type="file"/></div>
    </body>
</html>

You can style each element here

answered Apr 21, 2012 at 7:30

Jack

1,48213 silver badges20 bronze badges

Comments

Govind Malviya · Accepted Answer · 2012-04-21 07:24:40Z

-2

Directly you can't set any css on input type file you need to use trick for this. see this plugin

edited Apr 21, 2012 at 7:24

answered Apr 21, 2012 at 7:14

Govind Malviya

13.8k17 gold badges70 silver badges95 bronze badges

1 Comment

Kev Over a year ago

Whilst this may theoretically answer the question, we would like you to include the essential parts of the linked article in your answer, and provide the link for reference. Failing to do that leaves the answer at risk from link rot.

Collectives™ on Stack Overflow

Html/CSS Upload File

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related