Как сделать отображение имени файла на кнопке input[type="file"]?

Question

[Сергей]

Здравствуйте,
Помогите разобраться - как сделать чтобы после нажатия на кнопку 'прикрепить файл' показывалось само название файла вместо 'прикрепить файл'.
В дизайне нет самого поля, это просто кнопка и спрятанный input type="file"

В JS пока плохо разбираюсь, а готово не могу найти уже часа 2.

Сама идея была взята с хабра, там был такой пример, но с полем div где можно отображать файл

<div class="file_upload">
						<button type="button">Прикрепить файл</button>
						<input type="file" name="file">
					</div>

<script>
    var wrapper = $( ".file_upload" ),
        inp = wrapper.find( "input" ),
        btn = wrapper.find( "button" ),
        lbl = wrapper.find( "div" );
    btn.focus(function(){
        inp.focus()
    });
    btn.add( lbl ).click(function(){
        inp.click();
    });
	    var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false;

    inp.change(function(){
        var file_name;
        if( file_api && inp[ 0 ].files[ 0 ] )
            file_name = inp[ 0 ].files[ 0 ].name;
        else
            file_name = inp.val().replace( "C:\\fakepath\\", '' );

        if( ! file_name.length )
            return;

        if( btn.is( ":visible" ) ){
            btn.text( file_name );
            btn.text( "Прикрепить файл" );
        }else
            btn.text( file_name );
    }).change();
	</script>

Answer 1

[Денис Инешин]

Может просто взять приличный плагин, например этот: www.dropzonejs.com

Answer 2

[VA_ic2b]

<script>
    var wrapper = $( ".file_upload" ),
        inp = wrapper.find( "input" ),
        btn = wrapper.find( "button" ),
        lbl = wrapper.find( "div" );
    btn.focus(function(){
        inp.focus()
    });
    btn.add( lbl ).click(function(){
        inp.click();
    });
      var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false;

    inp.change(function(){
        var file_name;
        if( file_api && inp[ 0 ].files[ 0 ] )
            file_name = inp[ 0 ].files[ 0 ].name;
        else
            file_name = inp.val().replace( "C:\\fakepath\\", '' );

        if( ! file_name.length )
            return;
		
		btn.text(file_name);

    }).change();
  </script>