jquery触发器：单击文本链接时如何触发输入中的浏览文件？答案

【问题标题】：jquery trigger: how can I trigger the browse file in the input when I click on a text link?jquery触发器：单击文本链接时如何触发输入中的浏览文件？
【发布时间】：2011-10-31 05:53:48
【问题描述】：

跟进这个post，我有另一个发行者 - 当我点击文本链接时如何触发输入中的浏览文件？

基本上我想隐藏表单但是当你点击上传文本链接时它会被触发。

<a href="#" class="upload">upload</a>
<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm" style="display:none;">
  <input type="file" multiple="multiple" name="file[]" />
  <input type="submit" name="upload" value="Submit"/>
</form>
<div id="output"></div>

这是我的工作 Javascript 代码：

$(document).ready(function(){
    $('.upload').click(function(){
        $(this).trigger($('input[type=file]'));
        return false;
    });

    $('input[type=file]').change(function() {
        $('#myForm').ajaxSubmit({
               target: '#output'
        });
    });
});

【问题讨论】：

Emulate a file upload click in jQuery的可能重复

标签： jquery click jquery-forms-plugin eventtrigger

【解决方案1】：

你不能使用style="display:none;" 使用style="visibility:hidden;"

我将触发器更改为点击：

$('.upload').click(function(){
    $('input[type=file]').click();
    return false;
});

推理：

输入字段不会以display:none 发送到服务器，而是以visibility:hidden 发送。

【讨论】：

JavaScript 为我工作。但是你能告诉我为什么它会起作用而只是一个简单的 $("input[type=file]").click() 不会吗？
谢谢，尽管在我的例子中表单元素是可见的。仍然无法将直接“点击”附加到它。

【解决方案2】：

为什么不使用标签呢？那么你可以使用 for 属性。

<style type="text/css">
  #file_upload {
    visibility: hidden;
  }
</style>
<a href="#" class="upload">
  <label for="file_upload">upload</label
</a>
<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm">
  <input id="file_upload" type="file" multiple="multiple" name="file[]" />
  <input type="submit" name="upload" value="Submit"/>
</form>
<div id="output"></div>

【讨论】：

【解决方案3】：

乔的方法是正确的。但是，此解决方案仅适用于某些浏览器。它适用于 Chrome 和 Firefox，但不适用于 Opera、Safari 或 Android Galaxy S 内置浏览器（在 2012 年 6 月 23 日的当前版本上测试）。出于安全原因，这些浏览器可能会禁用通过 JS 触发上传按钮。

如果我找到适用于所有现代浏览器的解决方案，我会更新这篇文章

【讨论】：

您找到解决方案了吗？我有一个类似的问题，需要找到可以跨浏览器工作的东西。

【解决方案4】：

<button>
  <label>
    select file
    <input type="file" style="visibility: hidden" file-handler>
  </label>
</button>

这应该对你有帮助

【讨论】：