forgot password?
need an account?

Notifications close x

Replace ugly file input fields with images

loading social widgets...
LewisAndersonWritten By: LewisAnderson   flag
Publish Date: February 25, 2015
PURE VANILLA JAVASCRIPT AWESOMENESS ! Replace those ugly file input fields with something of your own choosing...images, plain text, links, buttons..
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #standardUpload{ display: none; } .finger{ cursor:pointer } </style> <script> function triggerUpload(event,elem){ event.preventDefault(); document.getElementById(elem).click(); } </script> </head> <body> <p class="finger" onclick="triggerUpload(event, 'FileUpload')">Upload a photo</p> <br /> <img class="finger" src="topicicon_open.png" width="15" height="18" onclick="triggerUpload(event, 'FileUpload')" title="Upload Photo"> <br /><br /><br /> <button id="thisBTN" onclick="triggerUpload(event, 'FileUpload')">Add A Photo</button> <br /><br /><br /> <input id="uploadButton" type="button" value="Upload" onclick="triggerUpload(event, 'FileUpload')"> <br /><br /><br /> <a href="#" onclick="triggerUpload(event, 'FileUpload')">Upload Photo </a> <br /><br /><br /> <div id="standardUpload"><input type="file" name="FileUpload" id="FileUpload"/></div> </body> </html>
You can read more articles by LewisAnderson by clicking this link:
Articles written by LewisAnderson

User Notes And Comments ↓

Wednesday December 30, 2015 05:40:39 PM
CGTS said:Just what I was looking for... thanks for the lateral thinking.
© 2015
There is a top-shelf free educational course of videos associated with this domain, all about how to build custom communities and social network websites. There are over 45 videos in the course totaling just over 10 hours. We also archived the deprecated course material here for you to reference on the source files page.