How can I upload a new file on click of image button

Question

I have got a task to upload new file from the click of image button. My code is

    <label>File</lable>
    <input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>

On the click of this button I want to upload a new file.How can I do this? You can check my code from Demo

Answer 1

You could add a hidden file input field, like:

<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />

And do:

$("input[type='image']").click(function() {
    $("input[id='my_file']").click();
});

Demo:: Updated Fiddle