Search code examples
javascriptjqueryhtmlcss

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

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

Solution

  • 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