Loading...

File uploader

Single

          
    <div class="fileUpload">
      <div class="fileUpload__inputBox">
        <button class="formControl__clear display-none">첨부된 파일 삭제</button>
        <input type="text" class="form__input fileUpload__fileName" placeholder="파일을 선택하세요" readonly>
      </div>
      <label class="fileUpload__labelBtn btn is-primary">
        파일찾기
        <input type="file" class="fileUpload__input">
      </label> 
    </div>
    <script>
      //fileUpload Single
      const fileUpload = document.querySelectorAll(".fileUpload__input");
      fileUpload.forEach(item => {
        item.addEventListener("change", function () {
          let fileName = $(this)[0].files[0].name;
          this.parentNode.parentNode.querySelector('.fileUpload__fileName').value = fileName;
          if(this.parentNode.parentNode.querySelector('.fileUpload__fileName').value != "" ){
            this.parentNode.parentNode.querySelector('.formControl__clear').classList.remove('display-none');
          }
        });
      });
    </script>
        

Multiple

          
            <div class="fileUploadMultiple" id="multipleUploader"></div>
            <script>
            let multiUploader;
            window.addEventListener("DOMContentLoaded", function () {

              /*
              const options = {
                totalMaxSize : 0.5, 
                fileMaxSize : 0.1
              };
              const multiUploader = new dsMultiUpload('multipleUploader', options);
              */
              multiUploader = new dsMultiUpload('multipleUploader');
            });
            </script>
        

File download

파일 다운로드
          
    <div class="fileDownload">
        <a href="#" class="fileDownload__link">fileName.pdf(1.56MB)</a>
      </div>
      <table class="table">
        <colgroup>
          <col style="width:15rem;">
          <col>
        </colgroup>
        <tbody>
          <tr>
            <th>파일 다운로드</th>
            <td>
              <div class="fileDownload">
                <a href="#" class="fileDownload__link">fileName.pdf(1.56MB)</a>
              </div>
              <div class="fileDownload">
                <a href="#" class="fileDownload__link">fileName.pdf(1.56MB)</a>
              </div>
            </td>
          </tr>
        </tbody>
      </table>