Jump to content

Image for File Uploader


beennn
 Share

Recommended Posts

I've been looking about and cant seem to find how to have an image as a file uploader instead of the default choose file button
<input type="file" />

any help would be great

Hi beennn, Greetings to you Mate :) It should be as: <input type="image" name="Submit" value="Submit" src="images/File-Upload.png" /> By the way, please visit the following link: http://w3schools.inv...showtopic=43240 and let me know if you would be interested to Join Me to start-up that Venture. Edited by creative1977
Link to comment
Share on other sites

Hi beennn, Greetings to you Mate :) It should be as: <input type="image" name="Submit" value="Submit" src="images/File-Upload.png" /> By the way, please visit the following link: http://w3schools.inv...showtopic=43240 and let me know if you would be interested to Join Me to start-up that Venture.
That makes the submit button an image, not the "Chose File" button.As for making the Choose File button an Img... I dont know. I haven't even figured out how to change the text Choose File to something else. Edited by Krewe
Link to comment
Share on other sites

still clueless I've found this using javascript: http://stackoverflow.com/questions/1377888/choose-file-box-by-clicking-on-image-not-with-browse-button doesn't seem to work though, or I'm doing something wrong by the looks of the likes
That should work though! Why not paste your code here, and lets see if you are missing something? Edited by CodeName
Link to comment
Share on other sites

<html><head><script language="javascript">function getFilePathFromDialog() {  document.getElementById('fileBrowser').click();  document.getElementById('filePath').value = document.getElementById('fileBrowser').value;}</script></head><body><img src="../../../wamp/www/images/browse_button.png" onlick="getFilePathFromDialog();"><input type="text" id="filePath" name="filePath" /><br /><input type="file" id="fileBrowser" name="fileBrowser" style="visibility:hidden; display:none;" /></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...