我想以<input type="file">编程方式在标签上触发click事件。

仅调用click（）似乎没有任何作用，或者至少它没有弹出文件选择对话框。

我一直在尝试使用侦听器捕获事件并重定向事件，但是我无法像某些人单击它那样实际地执行事件。

你可以这样做，在所有的浏览器，IE理应不会允许它，但Mozilla和Opera没有。

当您在GMail中编写邮件时，“附加文件”功能是针对IE和支持该功能的任何浏览器的一种方法，然后针对Firefox和不支持该功能的浏览器的另一种方法。

我不知道为什么你不能做到这一点，但有一点是安全风险，并且不允许你在任何浏览器做的，是编程设置HTML文件元素的文件名。

我整天都在寻找解决方案。这些是我得出的结论：

1. 出于安全原因，Opera和Firefox不允许触发文件输入。
2. 唯一方便的替代方法是创建一个“隐藏”文件输入（使用不透明度，而不是“隐藏”或“显示：无”！），然后在其下方创建按钮。通过这种方式可以看到按钮，但在用户单击时实际上会激活文件输入。

希望这可以帮助！:)

<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity=0);  position: relative; top: -40px;; left: -20px" />
</div>

您可以在任何浏览器上触发click（），但是某些浏览器需要该元素可见并集中。这是一个jQuery示例：

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

它可以与hide之前的hide一起工作，click()但是我不知道是否在不调用show方法的情况下可以工作。我从未在Opera上尝试过此功能，而是在IE / FF / Safari / Chrome上进行了测试，并且可以正常工作。我希望这将有所帮助。

这是可能的：在FF4 +，Opera？，Chrome下：但是：

1. inputElement.click()应该从用户操作上下文中调用！（不是脚本执行上下文）

2. <input type="file" />应该是可见的（inputElement.style.display !== 'none'）（您可以使用可见性或其他方式隐藏它，但不能使用“显示”属性来隐藏它）

对于那些了解您必须在链接上覆盖不可见形式但又懒得写的人，我为您编写了它。好吧，对我而言，但不妨分享一下。欢迎发表评论。

HTML（某处）：

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

HTML（您不关心的地方）：

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

尝试以下解决方案：http : //code.google.com/p/upload-at-click/

只需使用标签标签，这样您就可以隐藏输入，并使其通过相关标签 https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

如果您希望该click方法在Chrome，Firefox等上运行，请对输入文件应用以下样式。它会被完全隐藏，就像您做一个display: none;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

就这么简单，我测试了它的工作原理！

$(document).one('mousemove', function() { $(element).trigger('click') } );

当我遇到类似问题时为我工作，这是常规的eRube Goldberg。

解决方案

让我添加到这个旧帖子中，我曾经使用过一个有效的解决方案，该解决方案可以在所有新旧浏览器中的80％或更多使用。

解决方案既复杂又简单。第一步是利用CSS并通过“ under-elements”掩盖输入文件的类型，因为它的不透明度为0。下一步是使用JavaScript根据需要更新其标签。

HTML _{如果您想要一种快速的方法来访问特定元素，则只需插入ID，但是这些类是必需的，因为它们与设置整个过程的CSS有关}

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

CSS _{请记住，颜色和字体样式等完全是您的偏爱，如果您使用此基本CSS，则始终可以随心所欲地使用后端标记来标记样式，这在最后列出的jsFiddle中显示。}

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

JavaScript _{纯正，但是，某些更旧（已淘汰）的浏览器可能仍会遇到问题（例如Netscrape 2！）}

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

工作jsFiddle示例

有用 ：

出于安全原因，在Firefox和Opera上，您无法触发对文件输入的点击，但可以使用MouseEvents模拟：

<script>
click=function(element){
    if(element!=null){
        try {element.click();}
        catch(e) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
            element.dispatchEvent(evt);
            }
        }
    };
</script>

<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">

我知道这已经很老了，所有这些解决方案都是针对具有实际价值的浏览器安全预防措施的黑客。

就是说，到目前为止，fileInput.click（）在当前的Chrome（36.0.1985.125 m）和当前的Firefox ESR（24.7.0）中均可运行，但在当前的IE（11.0.9600.17207）中则无效。在按钮顶部覆盖具有不透明度0的文件字段是可行的，但是我希望将link元素用作可见触发器，并且悬停下划线在任何浏览器中都无法正常工作。它闪烁然后消失，可能是浏览器在思考是否确实应用了悬停样式。

但是我确实找到了在所有这些浏览器中都可以使用的解决方案。我不会声称已经测试了每种浏览器的每个版本，也不知道它将永远持续工作，但是现在看来可以满足我的需求。

很简单：将文件输入字段放在屏幕外（位置：绝对；顶部：-5000px），在其周围放置标签元素，然后触发对标签的单击，而不是文件字段本身。

请注意，链接确实需要编写脚本才能调用标签的click方法，它不会自动执行此操作，就像单击标签元素内的文本时一样。显然，link元素捕获了单击，并且没有将其传递到标签。

还要注意，由于该字段不在屏幕上，因此这不提供显示当前所选文件的方法。我想在选择文件后立即提交，所以这对我来说不是问题，但是如果您的情况有所不同，则需要采用某种不同的方法。

JS小提琴：http : //jsfiddle.net/eyedean/1bw357kw/

popFileSelector = function() {
    var el = document.getElementById("fileElem");
    if (el) {
        el.click();  
    }
};

window.popRightAway = function() {
    document.getElementById('log').innerHTML += 'I am right away!<br />';
    popFileSelector();
};

window.popWithDelay = function() {
    document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
    window.setTimeout(function() {
        document.getElementById('log').innerHTML += 'I was delayed!<br />';
        popFileSelector();
    }, 1000);
};

<body>
  <form>
      <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
  </form>
  <a onclick="popRightAway()" href="#">Pop Now</a>
    <br />
  <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
    <div id="log">Log: <br /></div>
</body>

该代码对我有用。这是您要做什么？

<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button  id="addfiles" >Add files</button>

<script language="javascript" type="text/javascript">
   $("#addfiles").click(function(){
      $("#fileinput").click();
   });
</script>

我的jQuery和jQuery-ui Safari浏览器解决方案：

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

这是解决此问题的纯JavaScript解决方案。在所有浏览器上均可正常运行

<script>
    function upload_image_init(){
        var elem = document.getElementById('file');
        if(elem && document.createEvent) {
           var evt = document.createEvent("MouseEvents");
           evt.initEvent("click", true, false);
           elem.dispatchEvent(evt);
        }
    }
</script>

有一些方法可以将事件重定向到控件，但是不要期望自己能够轻松地将事件触发到控件，因为出于（良好）安全原因，浏览器将尝试阻止事件。

如果您只需要在用户单击某些内容时显示文件对话框，例如，因为您希望更好看的文件上传按钮，那么您可能想看看Shaun Inman提出了什么。

我已经能够通过创造性地将焦点移入和移出按键，按键和按键事件之间的控件来实现键盘触发。YMMV。

我的真诚建议是，不要管它，因为这是浏览器不兼容之痛的世界。较小的浏览器更新也可能会在没有任何警告的情况下阻止欺骗，并且您可能必须不断重新发明hack才能使其正常运行。

我之前对此进行了研究，因为我想创建一个自定义按钮，该按钮将打开文件对话框并立即开始上传。我只是注意到一些可能使之成为可能的东西-当您单击上载的任何位置时，Firefox似乎都会打开对话框。因此，可以执行以下操作：

1. 创建一个文件上传和一个单独的元素，其中包含要用作按钮的图像
2. 排列它们以使其重叠，并使文件元素背景和边界透明，因此按钮是唯一可见的
3. 添加Javascript，以在单击按钮/文件输入时使IE打开对话框
4. 选择文件后，使用onchange事件提交表单

这只是理论上的，因为我已经使用了另一种方法来解决该问题，但它可能会起作用。

我有一个<input type="button">看不见的标签。我所做的是将"onClick"事件附加到任何类型的可见组件上，例如标签。这是通过使用Google Chrome浏览器的开发人员工具或Mozilla Firefox的Firebug并通过右键单击“编辑HTML”命令来完成的。在这种情况下，请指定以下脚本或类似内容：

如果您有JQuery：

$('#id_of_component').click();

如果不：

document.getElementById('id_of_component').click();

谢谢。

嘿，这个解决方案有效。下载，我们应该使用MSBLOB

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};

对于AngularJS甚至普通的javascript。

现在，这在Firefox 4中将成为可能，但需要注意的是，它被视为弹出窗口，因此只要有弹出窗口就将被阻止。

这是对我有用的解决方案： CSS：

#uploadtruefield {
    left: 225px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 266px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    width: 270px;
    z-index: 2;
}

.uploadmask {
    background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
    width:132px;
}

带有“小” JQuery帮助的HTML：

<div class="uploadmask">
    <input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield"  type="file" onchange="$('#uploadmaskfield').val(this.value)" >

只要确保maskfied被真正的上载字段完全覆盖即可。

您可以按照<a>标签上“打开文件”对话框中的答案进行操作

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px;     height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>

我发现如果input（file）在表单之外，则触发click事件将调用文件对话框。

希望这对某人有帮助-我花了2个小时将头撞向它：

在IE8或IE9中，如果您以任何方式触发使用javascript打开文件输入（相信我，我已经尝试了所有方法），它不会让您使用javascript提交表单，只会无声地失败。

通过常规的提交按钮提交表单可能有效，但可以调用form.submit（）;。将无声地失败。

我不得不求助于我的选择文件按钮覆盖一个有效的透明文件输入。

这为我工作：

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

这不是不可能的：

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

但是以某种方式，它只有在通过点击事件调用的函数中才有效。

因此，您可能需要进行以下设置：

的HTML：

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

JavaScript：

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

您可以使用

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>