<input type="file"> 는 직접 디자인을 변경할 수 없으므로 간단하지만 label 태그와 jQuery를 사용하여 커스터마이징합니다.

기본

<input type="file"> 사용자 정의

sample.html

<label for="form-image">ファイルを選択</label>
<input type="file" id="form-image">
<span class="select-image">選択されていません</span>

input 태그 위에 label 태그를 기술합니다. label 태그로 input 태그를 둘러싸 버릴 수도 있습니다.

label 태그의 for와 input 태그의 id에 같은 값을 지정해 태그의 연결을 합니다.
이렇게하면 label 태그의 요소를 클릭하면 파일을 선택할 수 있습니다.

※덧붙여서 id는 2개 이상 지정할 수 없으므로 주의해 주세요.

sample.css

label {
  padding: 5px 20px;
  color: #ffffff;
  background-color: #295d72;
  cursor: pointer;
  border-radius:10px;
  transition: .3s;
}
label:hover {
  opacity: 0.8;
}
input[type="file"] {
  display: none;
}

input 태그를 display: none; 로 숨깁시다.

방금 for와 id를 연결하고 있으므로 css를 맞춘 label 태그를 클릭해도 파일을 선택할 수 있습니다.

이 시점에서 파일을 선택해도 span 태그 내에 파일 이름이 표시되지 않고 "선택되지 않음"의 텍스트 그대로이므로 jQuery에서 텍스트를 파일 이름으로 변환합니다.

※jQuery는 적절한 환경에서 설치해 주세요.

input_file.js

//fileを変更したら
$('input').on('change', function () {
    //propを使って、file[0]にアクセスする
    var file = $(this).prop('files')[0];
    //text()で要素内のテキストを変更する
    $('.select-image').text(file.name);
});

input 태그에 file이 설정되었을 때 select-image라는 클래스가 있는 태그의 텍스트를 file.name으로 변경합니다.
$('span').text(file.name); 하지만 괜찮습니다만, 다른 input 태그안에 있는 span 태그에 의도하지 않은 변화가 있을 수 있으므로 클래스를 지정했습니다.

See the Pen mdWxaxq by 아키미네 ( 아키미네 )
on CodePen .