jquery - jquery trigger：当我点击文本链接时，如何触发输入中的浏览文件？

Question

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

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

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

Answer 1

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

我将触发器更改为单击：

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

---

推理：

输入字段不会与 一起发送到服务器display:none，但会与一起发送到服务器visibility:hidden。

Answer 2

why don't you use a label instead? then you could use the for attribute.

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

Answer 3

Joe's method is correct. However, this solution will only work in some browsers. It works on Chrome and Firefox but not on Opera, Safari, or the Android Galaxy S built-in browser (tested on current versions as of June 23, 2012). Those browsers likely disable triggering the upload button via JS for security reasons.

I will update this post if I find a solution that works in all modern browsers

Answer 4

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

This should help you