Image browse Button onclick

[Bishnudas]

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]

[Dormilich]

you can use the <button> element (which can contain images) and set it as file type button.

[Bishnudas]

Hi Dormilich could you please share the code as i am new in the field of Javascripts.

[Dormilich]

gonna be difficult, as the code is in HTML.

[Bishnudas]

ya its ok but could you pls share that code with me..pls..

[Dormilich]

there is nothing much to share, the definition of a button is here, and for an image here. you just need to combine it.

[Bishnudas]

yes i have done that but not working:
Here is my HTML Code:

<button onclick="javascript:fileSelected();" >
                                <input type="image" src="logo-attachment.png" alt="" id="myimage"  />
                                <br />
                            </button>

and here is my Javascripts code:

function fileSelected() {
    alert('Testing');
    // hide different warnings
    document.getElementById('upload_response').style.display = 'none';
    document.getElementById('error').style.display = 'none';
    document.getElementById('error2').style.display = 'none';
    document.getElementById('abort').style.display = 'none';
    document.getElementById('warnsize').style.display = 'none';
    alert(document.getElementById('myimage').files[0]);
    // get selected file element
    var oFile = document.getElementById('myimage').files[0];
    //img.src = "logo-attachment.png";
    //var oFile = document.getElementById('myimage').src = "logo-attachment.png";
 
 
    // filter for image files
    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
    if (! rFilter.test(oFile.type)) {
        document.getElementById('error').style.display = 'block';
        return;
    }
 
    // little test for filesize
    if (oFile.size > iMaxFilesize) {
        document.getElementById('warnsize').style.display = 'block';
        return;
    }
 
    // get preview element
    var oImage = document.getElementById('preview');
 
    // prepare HTML5 FileReader
    var oReader = new FileReader();
        oReader.onload = function(e){
 
        // e.target.result contains the DataURL which we will use as a source of the image
        oImage.src = e.target.result;
 
        oImage.onload = function () { // binding onload event
 
            // we are going to display some custom image information here
            sResultFileSize = bytesToSize(oFile.size);
            document.getElementById('fileinfo').style.display = 'block';
            document.getElementById('filename').innerHTML = 'Name: ' + oFile.name;
            document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize;
            document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type;
            document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight;
        };
    };
 
    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}

What's wrong here i don't know...
Please help me out..

[Dormilich]

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?

[Bishnudas]

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.

[Dormilich]

I’ve already told you what’s wrong with your HTML.