CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nithin Viswanathan
Nithin Viswanathan

Reputation: 3283

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

Upvotes: 23

Views: 108612

Answers (8)

Perlat Kociaj
Perlat Kociaj

Reputation: 181

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>

Upvotes: 17

Mhing Jhang
Mhing Jhang

Reputation: 11

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>

Upvotes: 1

Sandeep Rana
Sandeep Rana

Reputation: 309

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

Upvotes: 3

user1087079
user1087079

Reputation: 1356

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

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

Upvotes: 0

Remo H. Jansen
Remo H. Jansen

Reputation: 24941

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

Upvotes: 2

Rasmus Bech
Rasmus Bech

Reputation: 84

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.

Upvotes: 2

Supriti Panda
Supriti Panda

Reputation: 1291

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.

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

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

Upvotes: 59

Related Questions