커스텀 파일업로드 타입(file-upload) -접근성고려 #2

웹 접근성 파일업로드 타입

이 포스팅의 인풋 타입의 파일 업로드는 디자인 커스텀이 가능할 뿐만 아니라 접근성 포커스 이동까지 준수한 파일 업로드입니다.

현재 포커스시의 색상은 빨간색 타입의 dotted 로 정의되어 있습니다.

HTML

html

<div class="input-file">
  <input type="text" readonly="readonly" class="file-name" />
  <label for="upload01" class="file-label">파일 업로드</label>
  <input type="file" name="" id="upload01" class="file-upload" />
</div>
<br /><br />
<div class="input-file">
  <input type="text" readonly="readonly" class="file-name" />
  <label for="upload02" class="file-label">찾아보기</label>
  <input type="file" name="" id="upload02" class="file-upload" />
</div>

CSS

css

* {
  margin: 0;
  padding: 0;
}
body {
  width: 700px;
  margin: 40px auto;
}

/* input file type */
.input-file {
  display: inline-block;
}

.input-file [type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 none;
}
.input-file .file-label {
  display: inline-block;
  min-width: 53px;
  height: 27px;
  line-height: 24px;
  padding: 0 10px;
  border-radius: 2px;
  font-size: 13px;
  background-color: #333;
  color: #fff;
  text-align: center;
}
.input-file .file-name {
  width: 300px;
  background: #f5f5f5;
  height: 27px;
  line-height: 26px;
  text-indent: 5px;
  border: 1px solid #bbb;
}

/* 접근성 탭 포커스 스타일 */
.file-focus {
  outline: 1px dotted #d2310e;
}

javaScript

javascript

(function($){
  
  var $fileBox = null;
  
  $(function() {
    init();
  })
  
  function init() {
    $fileBox = $('.input-file');
    fileLoad();
  }
  
  function fileLoad() {
    $.each($fileBox, function(idx){
      var $this = $fileBox.eq(idx),
          $btnUpload = $this.find('[type="file"]'),
          $label = $this.find('.file-label');
      
      $btnUpload.on('change', function() {
        var $target = $(this),
            fileName = $target.val(),
            $fileText = $target.siblings('.file-name');
        $fileText.val(fileName);
      })
      
      $btnUpload.on('focusin focusout', function(e) {
        e.type == 'focusin' ?
          $label.addClass('file-focus') : $label.removeClass('file-focus');
      })
      
    })
  }
  
})(jQuery);

File upload Overview #1

File upload Overview #2

다른 스타일의 파일업로드 타입입니다.

See the Pen 커스텀 파일업로드 타입(네이버) by jaeheekim (@jaehee) on CodePen.

Related links

1. 폼 커스텀 파일업로드 #1

Jaehee's WebClub