Question

我尝试使用自定义样式创建一个FORM File输入按钮。

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

<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

您可能值得查看此帖：How can I upload files asynchronously?

快速谷歌搜索“jQuery文件上传”也表明有几个插件可用于完成你想要做的事情，而且很可能你可以自定义这些插件的样式。让他们看起来你喜欢。

我个人喜欢this one by blueimp。

使用jQuery上传触发器文件

1 个答案: