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

Answer 2

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>

Answer 3

如果您正在寻找跨浏览器兼容的解决方案，您应该查看 plupload( http://www.plupload.com ) 它支持图像按钮以及我记得的。

Answer 4

you are using the wrong input, use file instead, if you want the button to loke like the circle in your code demo you will need to use CSS to change the way "submit" looks like. This has to be in a form:

<form action="upload_file.php" method="post" enctype="multipart/form-data">
  <input type="file" name="myfile"/>
  <input type="submit" class="circle-btn"/>
<form>

I don't know what language are you using in the server-side (PHP, ASP.NET, etc) but you will need to create a page (for xample "upload_file.php" for php). You can easily find examples in google about how to create a page like that, just copy pasete the code:

An example in PHP: http://www.w3schools.com/php/php_file_upload.asp

Hope it helps :)

Answer 5

There is no need for javascript.

Just place both <input type="file"> and <img src=""> inside a label.

Eg:
<label>
    <input type="file" style="display:none">
<img src=""> 
</label>

This will work Just Fine

Demo: https://codepen.io/sandeeprana1001/pen/dyPVvJZ

Answer 6

You can do this using css.

Please check the 4th answer in this blog.

How can I customize the browse button?

You can use your image as background image of the .button class.

Answer 7

Supplement for DemoUser's answer, add .focus() works for me.

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

Answer 8

You can also use this in order to access the file that you uploaded since in PHP you can't access the file inside a label.

<input type="file" name="input" id="input" style="display:none;">
<label for="input">
    <img src="images/default.jpg" id="image">
</label>