Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

graphic content in the input type=file tag

Status
Not open for further replies.
Guest_imported

Guest_imported

New member
Jan 1, 1970
0
when you use the 'input' tag and as type 'file', you get a button labelled Browse...

is there a way to replace that button with an image, like a jpg, gif or png file?
 
Sort by date Sort by votes
<!-- tested on IE6 -->
<html>
<head>
<script language=&quot;javascript&quot; type=&quot;text/javascript&quot;>
<!--
function activate() {
document.formname.inputname.click();
}
// -->
</script>
</head>
<body>
<a href=&quot;javascript:activate()&quot;>
<img src=&quot; border=&quot;0&quot;>
</a>
<div style=&quot;visibility: hidden;&quot;>
<form name=&quot;formname&quot;>
<input type=&quot;file&quot; name=&quot;inputname&quot;>
</form>
</div>
</body>
</html> ---------------------------------------
wmail.jpg


someone knowledge ends where
someone else knowledge starts
 
Upvote 0 Downvote
Neversleep,

You can also use an image without hiding the input box..
Code: 
<b><i>Filename:</i></b>
        <input type=file
               name='file1'
               size='15'
               style='display: none;'>
        <br>
        
        <input type='text'
               name='file2'
               id='file2'>
        
        <img src='images/browse-up.gif'
             name='brower'
             id='brower'
             width='83' height='24' border='0'
             alt=''
             align='absmiddle'
             onclick='document.all.file1.click(); 
                       
document.all.file2.value=document.all.file1.value'
             onMouseDown='this.src=&quot;images/browse-dn.gif&quot;'
             onMouseUp='this.src=&quot;images/browse-up.gif&quot;'
             onMouseOut='this.src=&quot;images/browse-up.gif&quot;'>
Hope this helps Wullie

 
Upvote 0 Downvote
onclick='document.all.file1.click();

i should have tought of that .... ---------------------------------------
wmail.jpg


someone knowledge ends where
someone else knowledge starts
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
202
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
758
spamjim
spamjim
Mackeinath
  • Locked
  • Question
Xml file import
Replies
0
Views
567
Mackeinath
Mackeinath
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top