Emulate a file upload click in jQuery

Question

I have an 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

Answer 1

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>

Answer 2

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

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

Answer 3

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.

Answer 4

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)