CODEWITHSUNDEEP
javascriptjqueryevents
Mark Ursino
Mark Ursino

Reputation: 31435

Emulate a file upload click in jQuery

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();
...

Upvotes: 6

Views: 14069

Answers (5)

Tiago
Tiago

Reputation: 192

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>

Upvotes: 0

Adam McCormick
Adam McCormick

Reputation: 1670

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>

Upvotes: 6

John Wong
John Wong

Reputation: 51

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

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

Upvotes: 5

Bazuka
Bazuka

Reputation: 368

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)

Upvotes: 2

Justin
Justin

Reputation: 9801

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.

Upvotes: -1

Related Questions