使用 jQuery 触发文件上传答案

【问题标题】：Trigger file upload with jQuery使用 jQuery 触发文件上传
【发布时间】：2013-04-26 10:38:43
【问题描述】：

我正在尝试使用我的自定义样式创建一个 FORM 文件输入按钮。

下面是代码，但它不起作用。

<style type="text/css">
 .pictures { width:200px; height:70px; overflow:hidden;}
    input{position:absolute; top:-100px;}
</style>


<form id="test_form" method="post">

<div class="pictures">
  <input type="file">
  <button>Upload</button>
      <label>No file selected</label>
</div>

<div class="pictures">
  <input type="file">
  <button>Upload</button>
      <label>No file selected</label>
</div>

<div class="pictures">
  <input type="file">
  <button>Upload</button>
      <label>No file selected</label>
</div>

</form>

<script>
    $(function(){
        $("button").click(function() {
        var $this = $(this),
            inputVal = $this.closest('input').val();

        $this.closest('input').click(
            function(){
                $(this).change(function(){
                    $this.closest('label').text(inputVal);
                });
            }
        );      

    })  
    });
</script>

【问题讨论】：

现在正在触发点击，但标签文本没有填满。 $("button").click(function() { var $this = $(this), inputVal = $this.prev().val(); //$this.prev().trigger('click') ; $this.prev().trigger('click', function(){ $(this).change(function(){ $this.next().text(inputVal); }); } ); });

标签： jquery forms file-upload input

【解决方案1】：

也许值得你看看这篇文章：How can I upload files asynchronously?

对“jQuery 文件上传”的快速 Google 搜索还显示，有几个插件可用于完成您正在尝试做的事情，并且您很可能能够自定义这些插件的样式以让它们看起来像你喜欢的样子。

我个人喜欢this one by blueimp。

【讨论】：

谢谢我会这样做，我很快就会在这里发布我的最终工作 jsfiddle。