CSS 및 JavaScript를 사용하여 HTML5 파일 입력을 어떻게 사용자 정의할 수 있습니까?

CSS3 및 Javascript를 사용하여 "입력 파일" 구성 요소 사용자 정의

CSS3와 JavaScript를 이용한 컴포넌트가 가능합니다. 또는 클릭 시 파일 브라우저를 실행하는 스타일이 지정된 div를 생성할 수 있습니다.

CSS3 스타일링

입력 파일 구성 요소의 스타일을 지정하려면 CSS3를 사용할 수 있습니다. 예를 들어 다음 스타일을 적용할 수 있습니다.

input[type="file"] {
    display: none;
}

이렇게 하면 기본 파일 입력 구성 요소가 숨겨집니다.

JavaScript/jQuery 구현

JavaScript 또는 jQuery를 사용하면 요소. 예를 들어, 클릭하면 파일 브라우저를 실행하는 div를 생성할 수 있습니다.

<div>
<pre class="brush:php;toolbar:false">#file {
    display: none;
}

var wrapper = $('<div>').css({height: 0, width: 0, 'overflow': 'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function() {
    $this = $(this);
    $('#file').text($this.val());
});

$('#file').click(function() {
    fileInput.click();
}).show();<p>이 스크립트는 원본 입력 파일 구성 요소를 숨기고 "파일 선택"이라는 레이블이 붙은 클릭 가능한 div를 생성합니다. div를 클릭하면 파일 브라우저가 열립니다.</p>
</div>