觸發文件上傳與jQuery

Question

我試着去創建我的自定義樣式表單文件輸入按鈕。

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

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