jquery向其他元素顯示輸入類型文件的值

Question

我試圖顯示輸入文件的值/元素到元素。代碼運行正常..但問題是當用戶點擊並選擇一個文件。該文件不顯示時刻用戶選擇文件，而是顯示用戶何時再次點擊上傳按鈕。所以我如何讓輸入字段的值顯示用戶做出選擇的時刻。

$(document).ready(function() { 
    $(".filename").each(function() { 
     $('.upload').click(function() { 
      $('#file_button').click(); 
      var file = $('#file_button').val(); 
      if (file !== null) { 
       if ($('.filename').val() !== null) { 
        $($('.filename')).empty(); 
       } 
       $('<span>' + file + '</span>').appendTo('.filename'); 
      } 
     }); 
    }); 
}); 

我的CSS：

#file_button { 
    display: none; 
} 

//然後放下去的CSS上傳按鈕

HTML：

<button type="button" class="upload"> Upload a File </button> 
<p class="filename"> </p> 
<input type="file" id="file_button"/> 

Answer 1

檢查這一個...

Demo Fiddle

$(document).ready(function() { 
    $(".filename").each(function() { 
     $('.upload').click(function() { 
      $('#file_button').click(); 

     }); 

     $("#file_button").change(function() { 
      var file = $('#file_button').val(); 
      if (file !== null) { 
       if ($('.filename').val() !== null) { 
        $($('.filename')).empty(); 
       } 
       $('<span>' + file + '</span>').appendTo('.filename'); 
      } 
     }); 
    }); 
}); 

Answer 2

$("#file_button").on('change',function(){ 
    alert('Selected'); 
}); 

然後千方百計想讓你通過更換預期警報。