In JavaScript can I make a “click” event fire programmatically for a file input element?

前端 未结 28 1305
囚心锁ツ
囚心锁ツ 2020-11-21 06:29

I\'d like to make a click event fire on an tag programmatically.

Just calling click() doesn\'t seem to do anything or at lea

相关标签:
28条回答
  • 2020-11-21 06:42

    For those who understand that you have to overlay an invisible form over the link, but are too lazy to write, I wrote it for you. Well, for me, but might as well share. Comments are welcome.

    HTML (Somewhere):

    <a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>
    

    HTML (Somewhere you don't care about):

    <div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
        <form method="POST" enctype="multipart/form-data">
            <input type="file" name="file" />
        </form>
    </div>
    

    JavaScript:

    function pageY(el) {
        var ot = 0;
        while (el && el.offsetParent != el) {
            ot += el.offsetTop ? el.offsetTop : 0;
            el = el.offsetParent;
        }
        return ot;
    }
    
    function pageX(el) {
        var ol = 0;
        while (el && el.offsetParent != el) {
            ol += el.offsetLeft ? el.offsetLeft : 0;
            el = el.offsetParent;
        }
        return ol;
    }
    
    function fileMove() {
        if (navigator.appName == "Microsoft Internet Explorer") {
            return; // Don't need to do this in IE. 
        }
        var link = document.getElementById("fileLink");
        var form = document.getElementById("uploadForm");
        var x = pageX(link);
        var y = pageY(link);
        form.style.position = 'absolute';
        form.style.left = x + 'px';
        form.style.top = y + 'px';
    }
    
    function fileBrowse() {
        // This works in IE only. Doesn't do jack in FF. :( 
        var browseField = document.getElementById("uploadForm").file;
        browseField.click();
    }
    
    0 讨论(0)
  • 2020-11-21 06:44

    This worked for me:

    <script>
        function sel_file() {
            $("input[name=userfile]").trigger('click');
        }  
    </script>
    
    <input type="file" name="userfile" id="userfile" />
    
    <a href="javascript:sel_file();">Click</a>
    
    0 讨论(0)
  • 2020-11-21 06:45

    just use a label tag, that way you can hide the input, and make it work through its related label https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

    0 讨论(0)
  • 2020-11-21 06:46

    Try this solution: http://code.google.com/p/upload-at-click/

    0 讨论(0)
  • 2020-11-21 06:49

    This will now be possible in Firefox 4, with the caveat that it counts as a pop-up window and will therefore be blocked whenever a pop-up window would have been.

    0 讨论(0)
  • 2020-11-21 06:50
    $(document).one('mousemove', function() { $(element).trigger('click') } );
    

    Worked for me when I ran into similar problem, it's a regular eRube Goldberg.

    0 讨论(0)
提交回复
热议问题