Загрузка файла триггера с помощью jQuery

Question

Im пытается создать кнопку ввода файла 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

Это может быть полезным для вас, чтобы проверить это сообщение: How can I upload files asynchronously?

Быстрый поиск Google для «Jquery загрузки файла», также показывает, что существует несколько плагинов, которые доступны для достижения того, что вы пытаясь сделать это, и вполне вероятно, что вы сможете настроить стиль для этих плагинов, чтобы они выглядели так, как вам хотелось бы.

Я лично люблю this one by blueimp.