触发文件输入按钮

Question

我有以下情况：

<input id="upload_trigger_btn" type="file" name="files[]" multiple>
<a type="submit" class="button-normal-12px-ffffff" href="#"><span>Add files</span></a>

$(".add_files_btn").bind("click", function () {
    $("#upload_trigger_btn").trigger("click");
});

所以基本上我想用另一个触发文件输入按钮。这在firefox和IE中效果很好但是按钮不会在chrome和safari中触发。

Answer 1

您可以使用高度：0px和显示块来生成{'visibility'：'hidden'}，触发器可以使用它。

Answer 2

修改

在大多数情况下，你可以触发这样的事件：

$(".add_files_btn").click(function(){
    $("#upload_trigger_btn").click();
});

但是当谈到文件上传按钮时，一些浏览器（包括firefox）不允许该操作，因为它会带来安全风险。不幸的是，似乎没有单击功能的简单修复......

参考 - ＆gt; https://stackoverflow.com/a/3030174/992435

Answer 3

我认为你可以逃脱：

$(".add_files_btn").unbind("click").bind("click", function () {
   $("#upload_trigger_btn").click();
});

Answer 4

      <div class="btn btn-default fileinput-button ">
      <span><i class="fa fa-cloud-upload pr-10" aria-hidden="true"></i>UPLOAD FILE</span>  
       <input id="fileupload5" type="file">
      </div>

.fileinput-button input { position: absolute; top: 0; right: 0; margin: 0; opacity: 0; -ms-filter: 'alpha(opacity=0)'; font-size: 200px; cursor: pointer; }