Menu
Is it possible to style a input element of type file without worrying about browser compatibility? In my case I need to implement a background image and round border(1px), the button should also be customised if possible.
650
Follow these steps then you can create custom styles for your file upload form:
1.) This is the simple HTML form(please read the HTML comments I have written here bellow)
<form action="#type your action here" method="POST" enctype="multipart/form-data"> <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div> <!-- this is your file input tag, so i hide it!--> <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div> <!-- here you can have file submit button or you can write a simple script to upload the file automatically--> <input type="submit" value='submit' > </form> 2.) Then use this simple script to pass the click event to file input tag.
function getFile(){ document.getElementById("upfile").click(); } Now you can use any type of a styling without worrying how to change default styles. I know this very well, because I have been trying to change the default styles for month and a half. believe me it's very hard because different browsers have different upload input tag. So use this one to build your custom file upload forms.Here is the full AUTOMATED UPLOAD code.
<html> <style> #yourBtn{ position: relative; top: 150px; font-family: calibri; width: 150px; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px dashed #BBB; text-align: center; background-color: #DDD; cursor:pointer; } </style> <script type="text/javascript"> function getFile(){ document.getElementById("upfile").click(); } function sub(obj){ var file = obj.value; var fileName = file.split("\\"); document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1]; document.myForm.submit(); event.preventDefault(); } </script> <body> <center> <form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm"> <div id="yourBtn" onclick="getFile()">click to upload a file</div> <!-- this is your file input tag, so i hide it!--> <!-- i used the onchange event to fire the form submission--> <div style='height: 0px; width: 0px;overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div> <!-- here you can have file submit button or you can write a simple script to upload the file automatically--> <!-- <input type="submit" value='submit' > --> </form> </center> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
