By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,712 Members | 1,366 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,712 IT Pros & Developers. It's quick & easy.

Image browse Button onclick

P: 5
Hi
Is there a way to make the browse button an image?

I want a browser button with an attach image to browse files.
Please share the javascript code.
u can contact me in this email: [removed]
Apr 9 '13 #1
Share this Question
Share on Google+
9 Replies


Dormilich
Expert Mod 5K+
P: 8,639
you can use the <button> element (which can contain images) and set it as file type button.
Apr 9 '13 #2

P: 5
Hi Dormilich could you please share the code as i am new in the field of Javascripts.
Apr 9 '13 #3

Dormilich
Expert Mod 5K+
P: 8,639
gonna be difficult, as the code is in HTML.
Apr 9 '13 #4

P: 5
ya its ok but could you pls share that code with me..pls..
Apr 9 '13 #5

Dormilich
Expert Mod 5K+
P: 8,639
there is nothing much to share, the definition of a button is here, and for an image here. you just need to combine it.
Apr 9 '13 #6

P: 5
yes i have done that but not working:
Here is my HTML Code:
Expand|Select|Wrap|Line Numbers
  1. <button onclick="javascript:fileSelected();" >
  2.                                 <input type="image" src="logo-attachment.png" alt="" id="myimage"  />
  3.                                 <br />
  4.                             </button>
and here is my Javascripts code:
Expand|Select|Wrap|Line Numbers
  1. function fileSelected() {
  2.     alert('Testing');
  3.     // hide different warnings
  4.     document.getElementById('upload_response').style.display = 'none';
  5.     document.getElementById('error').style.display = 'none';
  6.     document.getElementById('error2').style.display = 'none';
  7.     document.getElementById('abort').style.display = 'none';
  8.     document.getElementById('warnsize').style.display = 'none';
  9.     alert(document.getElementById('myimage').files[0]);
  10.     // get selected file element
  11.     var oFile = document.getElementById('myimage').files[0];
  12.     //img.src = "logo-attachment.png";
  13.     //var oFile = document.getElementById('myimage').src = "logo-attachment.png";
  14.  
  15.  
  16.     // filter for image files
  17.     var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
  18.     if (! rFilter.test(oFile.type)) {
  19.         document.getElementById('error').style.display = 'block';
  20.         return;
  21.     }
  22.  
  23.     // little test for filesize
  24.     if (oFile.size > iMaxFilesize) {
  25.         document.getElementById('warnsize').style.display = 'block';
  26.         return;
  27.     }
  28.  
  29.     // get preview element
  30.     var oImage = document.getElementById('preview');
  31.  
  32.     // prepare HTML5 FileReader
  33.     var oReader = new FileReader();
  34.         oReader.onload = function(e){
  35.  
  36.         // e.target.result contains the DataURL which we will use as a source of the image
  37.         oImage.src = e.target.result;
  38.  
  39.         oImage.onload = function () { // binding onload event
  40.  
  41.             // we are going to display some custom image information here
  42.             sResultFileSize = bytesToSize(oFile.size);
  43.             document.getElementById('fileinfo').style.display = 'block';
  44.             document.getElementById('filename').innerHTML = 'Name: ' + oFile.name;
  45.             document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize;
  46.             document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type;
  47.             document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight;
  48.         };
  49.     };
  50.  
  51.     // read selected file as DataURL
  52.     oReader.readAsDataURL(oFile);
  53. }
What's wrong here i don't know...
Please help me out..
Apr 9 '13 #7

Dormilich
Expert Mod 5K+
P: 8,639
What's wrong here i don't know...
well, buttons have a default type, if you do not set one.

and images are not defined through an <input> element. besides that, what is a button inside a button supposed to be?
Apr 9 '13 #8

P: 5
its a image of "Attach" and i want that image to be a browse button so that i can browse files and attach files in an email. By the way , could you please rectify my faults in the above mentioned codes and post it here.
Apr 9 '13 #9

Dormilich
Expert Mod 5K+
P: 8,639
I’ve already told you what’s wrong with your HTML.
Apr 9 '13 #10

Post your reply

Sign in to post your reply or Sign up for a free account.