[Jquery] 파일 input 박스 디자인 바꾸기

XHTML

<div class="fileBox">

<input type="text" class="fileName" readonly="readonly">

<label for="uploadBtn" class="btn_file">찾아보기</label>

<input type="file" id="uploadBtn" class="uploadBtn">

</div>

CSS

.fileBox .fileName {display:inline-block;width:190px;height:30px;padding-left:10px;margin-right:5px;line-height:30px;border:1px solid #aaa;background-color:#fff;vertical-align:middle}

.fileBox .btn_file {display:inline-block;border:1px solid #000;width:100px;height:30px;font-size:0.8em;line-height:30px;text-align:center;vertical-align:middle}

.fileBox input[type="file"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

SCRIPT

var uploadFile = $('.fileBox .uploadBtn');

uploadFile.on('change', function(){

if(window.FileReader){

var filename = $(this)[0].files[0].name;

} else {

var filename = $(this).val().split('/').pop().split('\\').pop();

}

$(this).siblings('.fileName').val(filename);

});

참고사이트

http://mcatcher3.cafe24.com/%ED%8C%8C%EC%9D%BC%EC%B2%A8%EB%B6%80%EB%B0%95%EC%8A%A4input-typefile-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%B0%94%EA%BE%B8%EA%B8%B0/