CODEWITHSUNDEEP
htmlcss
Shibbir
Shibbir

Reputation: 69

Html/CSS Upload File

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.

Upvotes: 5

Views: 5547

Answers (3)

Nauphal
Nauphal

Reputation: 6202

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();
}

Upvotes: 2

Jack
Jack

Reputation: 1472

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

Upvotes: 0

Govind Malviya
Govind Malviya

Reputation: 13753

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

Upvotes: -2

Related Questions