在JavaScript中，我可以创建一个；点击"；以编程方式为文件输入元素触发事件？

我想以编程方式在

标记上触发单击事件

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

---

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

你不能在所有浏览器中都这样做，据说IE允许，但Mozilla和Opera不允许

当你在GMail中撰写一条信息时，“附加文件”功能是以一种方式为IE和任何支持此功能的浏览器实现的，然后以另一种方式为Firefox和那些不支持此功能的浏览器实现的

---

我不知道你为什么不能这么做，但有一件事是安全风险，你不允许在任何浏览器中这么做，以编程方式在HTML文件元素上设置文件名。

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

如果您只需要在用户单击某个内容时显示文件对话框，比如说，因为您需要外观更好的文件上载按钮，那么您可能需要查看一下

我已经能够实现键盘触发与创造性的重点转移和控制之间的按键向下，按键和按键向上的事件。YMMV

---

我真诚的建议是不要管它，因为这是一个浏览器不兼容的痛苦世界。较小的浏览器更新也可能会在没有警告的情况下阻止技巧，您可能需要不断重新发明黑客以保持其正常工作。

我刚才正在研究这个问题，因为我想创建一个自定义按钮，打开文件对话框并立即启动上载。我只是注意到了一些可能使这成为可能的事情——当你点击上传的任何地方时，firefox似乎会打开对话框。因此，以下几点可以做到：

创建文件上载和包含要用作按钮的图像的单独元素

将它们排列为重叠，并使文件元素背景和边框透明，以便按钮是唯一可见的东西

添加javascript，使IE在单击按钮/文件输入时打开对话框

选择文件时，使用onchange事件提交表单

---

这仅仅是理论上的，因为我已经使用了另一种方法来解决这个问题，但它可能会奏效。

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

出于安全原因，Opera和Firefox不允许触发文件输入

唯一方便的替代方法是创建一个“隐藏”文件输入（使用不透明度，而不是“隐藏”或“显示：无”！），然后在其下方创建按钮。通过这种方式可以看到按钮，但在用户单击时，它实际上激活了文件输入

希望这有帮助！：）

---

对于那些理解您必须在链接上覆盖一个不可见表单，但又懒得编写的人，我为您编写了它。好吧，对我来说，不过不妨分享一下。欢迎评论

HTML（某处）：

---

尝试此解决方案：

这将在Firefox 4中实现，但需要注意的是，它将被视为一个弹出窗口，因此在弹出窗口出现时将被阻止。

您可以在任何浏览器上启动click（），但某些浏览器需要该元素可见并聚焦。下面是一个jQuery示例：

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

---

它在

单击（）之前使用hide，但是如果不调用show方法，我不知道它是否有效。从未在Opera上尝试过，我在IE/FF/Safari/Chrome上进行了测试，效果很好。我希望这会有所帮助。
这段代码对我很有用。这就是你想做的吗

<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>


添加文件
$（“#添加文件”）。单击（函数（）{
$（“#文件输入”）。单击（）；
});
以下是适合我的解决方案：
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;
}

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

带有“小”JQuery帮助的HTML:

#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;
}

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



只需确保maskfied被true upload字段强制覆盖。
我有一个
标记隐藏在视图中。我所做的是将
“onClick”
事件附加到任何类型的可见组件上，例如标签。这是使用谷歌Chrome的开发工具或Mozilla Firefox的Firebug通过右键单击“编辑HTML”命令完成的。在此事件中，请指定以下脚本或类似内容：

如果您有JQuery：

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

如果没有：

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

谢谢。
如果您希望
单击
方法在Chrome、Firefox等浏览器上运行，请将以下样式应用于您的输入文件。它将被完全隐藏，就像你做了一个
显示：无

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

就这么简单，我测试过它的效果
 这是可能的：
在FF4+、Opera？和Chrome下：
但是：

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

应该是可见的（
inputElement.style.display！='none'
）（您可以使用可见性或其他方式隐藏它，但不能使用“display”属性）

使用jQuery和jQuery ui的Safari解决方案：

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

$（“”）.附件（“正文”）.focus（）.trigger（'click'）；

在我遇到类似问题时为我工作，这是一个普通的eRube Goldberg

工作解决方案

让我补充一下这篇老文章，这是一个我曾经使用过的有效解决方案，在所有新旧浏览器中可能有80%或更多的浏览器都能使用

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

HTML如果需要快速访问规范，只需插入ID即可
#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

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

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

<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>

.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;
}

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

<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>

<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">

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

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

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

<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>

<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>

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