Emulate a file upload click in jQuery

Question

I have an <img ... /> tag that I have bound a click event to in jQuery. When it is clicked I'd like to have it emulate the click of a button on the file upload to open the file system browse pop-up. I've tried these things within the click function and had no success:

...
$(".hiddenUploadBtn").click();
...

...
$(".hiddenUploadBtn").select();
...

...
$(".hiddenUploadBtn").submit();
...

You should accept Adam McCormick's new answer, which is demonstrably correct. I'd like to delete mine, but I can't while it's the accepted answer. — RichieHindle, Mar 13 '14 at 08:54

score 6 · Accepted Answer · edited Mar 13 '14 at 07:55

6

Just wrap the img in a label and set the for attribute to the file input. Works for any kind of content and it's built into the spec. You can even hide the file input at that point.

<input type="file" id="fileUpload"><br>
<label for="fileUpload">
    <img src="https://www.google.com/images/srpr/logo11w.png" />
</label>

edited Mar 13 '14 at 07:55

RichieHindle

272,464
47
358
399

answered Mar 12 '14 at 19:56

Adam McCormick

1,654
18
22

score 5 · Answer 2 · answered Mar 18 '11 at 02:20

5

Try this one using only javascript: http://code.google.com/p/upload-at-click/

Demo: http://upload-at-click.narod.ru/demo2.html

answered Mar 18 '11 at 02:20

John Wong

51
1
1

This is PHP-based, some people aren't looking for a PHP solution. – Chexpir Feb 15 '13 at 07:24
I am using this `js` file. It's working great.. In chrome & IE, we can able to get full path name, but in mozilla, we cant get full path. we can able to get only filename.... So, how do we get full path in mozilla? – Manikandan Sethuraju Apr 09 '13 at 09:28

Bazuka · Answer 3 · 2010-12-02T13:51:53.320

This works for me

<input name="picture" type="file" onchange="alert(this.value)" class="file" size=20/>

for use upload button as image try this

<style>
div.fileinputs {position:relative; display:inline;}
div.fakefile {position:absolute; top:0px; left:0px; z-index:1;}
input.file {position:relative; text-align:right; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; z-index:2;}
<style>

<div class="fileinputs">
  <input name="picture" type="file" onchange="alert(this.value)" class="file" size=1/>
  <div class="fakefile">
    <img src="images/browse.gif" align="middle" alt="browse" title="browse"/>
  </div>
</div>

so the input field is hidden, and when u click image - the selection dialog appears, but emulate this dialog from js imposible, yep. But you can also write the plugin/hack for browser)

score 0 · Answer 4 · answered Jun 12 '21 at 19:35

You can style a custom button as you wish and hide the current input file. So when clicking at the new button, it'll fire the file upload.

$(document).ready(function(){
  $('#newUploadButton').click(function(e){
     e.preventDefault();
     $('#formTest input[type="file"]').click();
  });
});

#fileUpload { display: none; }

#newUploadButton {
  background: #f2f2f2 url(images/icons/upload.png) no-repeat center left;
  color: #333;
    font-size: 14px;
    padding: 12px 12px 12px 40px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" class="" id="formTest" name="">
  <input type="file" id="fileUpload">
  <a href="#" id="newUploadButton">Upload here</a>
</form>

score -1 · Answer 5 · answered Nov 09 '10 at 17:07

-1

The spec says it is supposed to work, and it does, on Chrome. However, Firefox and other common browsers don't follow the rules, so you're SOL.

answered Nov 09 '10 at 17:07

Justin

9,419
7
34
41

2

Please post a link to the spec you're referring to. Also, there's a difference between the "spec" and browser implementations. For example, do all browsers make CSS render as it should per the spec? Obviously not. So just because the spec says it should work doesn't mean browser let it work. – Mark Ursino Nov 09 '10 at 20:15

Emulate a file upload click in jQuery

5 Answers5

Linked