JAY DESIGN

File attachment

Inputs File attachment
기본 첨부파일 버튼

  • attached_file_name.jpg
  • 2020_02_02_attached_file_name.xls
  • 2020_02_02_attached_file_name.png
<input type="file" class="attach-btn" id="attach_ex1">
<label for="attach_ex1" class="btn btn--primary">파일첨부</label>
<ul class="attach-list">
    <li><span>attached_file_name.jpg</span><button type="button" class="icon-x"></button></li>
    <li><span>2020_02_02_attached_file_name.xls</span><button type="button" class="icon-x"></button></li>
    <li><span>2020_02_02_attached_file_name.png</span><button type="button" class="icon-x"></button></li>
</ul>
첨부파일 버튼 박스

첨부 전

첨부 후

첨부이미지
//첨부 전
<div class="attach-box">
    <input type="file" id="attach_ex2">
    <label for="attach_ex2"><span>UPLOAD</span></label>
</div>

//첨부 후
<div class="attach-box">
    <img class="attach-box__img" src="../../images/sub/img-temp-1.jpg" alt="첨부이미지">
    <button type="button" class="attach-box__del icon-x"></button>
</div>