jquery - 使用 jQuery 触发文件上传

Question

我试图用我的自定义样式创建一个 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>

Answer 1

您可能值得查看这篇文章：如何异步上传文件？

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

我个人很喜欢blueimp 的这个。