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

Your closing label tag is misspelled. To upload an image you really need the 'file' input type. Info here on styling etc: http://stackoverflow.com/questions/4909228/style-input-type-file — Billy Moat, Apr 25 '13 at 08:49

score 59 · Accepted Answer · answered Apr 25 '13 at 08:50

59

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

answered Apr 25 '13 at 08:50

Sudhir Bastakoti

99,167
15
158
162

@Sudhir-How can I print the name in the html – Nithin Viswanathan Apr 25 '13 at 10:47
@DemoUser, this is not working for me(javascript). no action taking place – Vijay Kumar Jun 10 '15 at 09:44
well it works fine for me, do you get any js error..? – Sudhir Bastakoti Jun 10 '15 at 10:20
@Vijay Kumar: you must use document ready and place the code inside it – Steven Sugiarto Wijaya Sep 01 '16 at 04:07

score 15 · Answer 2 · answered Nov 09 '16 at 20:35

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>

score 3 · Answer 3 · edited Dec 31 '19 at 11:27

3

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

edited Dec 31 '19 at 11:27

Anantha Raju C

1,780
12
25
35

answered Dec 31 '19 at 07:18

Sandeep Rana

179
2
6

score 2 · Answer 4 · answered Apr 25 '13 at 08:57

2

If you are looking for a cross-browser compatible solution you should check out plupload(http://www.plupload.com) it supports image buttons aswell from what i remember.

answered Apr 25 '13 at 08:57

Rasmus Bech

84
2
8

score 2 · Answer 5 · answered Apr 25 '13 at 09:02

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 :)

score 1 · Answer 6 · edited May 23 '17 at 10:31

1

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.

edited May 23 '17 at 10:31

Community

1
1

answered Apr 25 '13 at 08:52

Supriti Panda

1,281
1
11
12

score 1 · Answer 7 · answered Nov 24 '21 at 22:33

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>

score 0 · Answer 8 · answered Jan 04 '16 at 03:13

0

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

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

answered Jan 04 '16 at 03:13

user1087079

1,358
12
10

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

8 Answers8

Linked