Question

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

Answer 1

您无法使用style="display:none;"使用style="visibility:hidden;"

我更改了触发器点击：

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

<小时/> 的推理：

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

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

Answer 3

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

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

Answer 4

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

这应该对您有帮助

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

4 个答案: