trigger click on input file

Question

i have this mark up

    
    

        

                      

              相关标签:
       
      

Answer 1

It's a security feature. Some browsers don't allow a non-manual click on file inputs. You can read more about it here and here.

Why isn't it possible to programmatically trigger the file input selection?

Most browsers prevent submitting files when the input field didn't receive a direct click (or keyboard) event as a security precaution. Some browsers (e.g. Google Chrome) simply prevent the click event, while e.g. Internet Explorer doesn't submit any files that have been selected by a programmatically triggered file input field. Firefox 4 (and later) is so far the only browser with full support for invoking "click"-Events on a completely hidden (display: none) file input field.

Answer 2

In most browsers(

jQuery(function($){
    $('#capture').on('click', function(e){
        e.preventDefault();
        $('#file')[0].click();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <input type="file" id="file" accept="image/*" capture="camera">
    <a href="#" id="capture">Submit Cleanup</a>
</div>

Answer 3

<label>
<input type="file" name="myfile" accept="application/pdf" id="myfile" style="display:none">
CLICK HERE!
</label>
<br>
<a href="javascript:document.querySelector('input#myfile').click()">OR HERE</a>