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

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

There is no need for javascript just put the <input> and the <img> inside <label> make sure you hide the <input> like so:

   <label for="image">
      <input type="file" name="image" id="image" style="display:none;"/>
      <img src="IMAGE URL"/>
   </label>