🕹 스크립트

javascript 첨부파일 input=file 커스텀 및 파일크기 체크

(。θᗨθ。) 2023. 10. 20. 16:05
<input type="file" id="H_File" name="H_File" style="display: none" onchange="fileSize(this)">
<div class="likeInput">* 첨부파일은 10MB이하만 등록가능합니다.</div><!-- .likeInput -->
<label for="H_File">등록</label>
<button class="inquiry__item--btnDel" onClick="fileRemove()">삭제</button><!-- .inquiry__item--btnDel -->
<script>
    // inquiry file remove
    function fileRemove() {
      if(confirm("삭제하시겠습니까?")) {
        alert('삭제되었습니다.');
        document.getElementById('H_File').value = null;
        document.querySelector(".likeInput").innerText = '* 첨부파일은 10MB이하만 등록가능합니다.'
      } else {

      }
    }

    //파일등록시 사이즈
    function fileSize(obj){
      var fileNm = obj.value; 
      var maxSize = 10485760; //10mb
      var fileSize = 0; 
      var fileName = document.getElementById("H_File").files[0].name;
      if(fileNm != ''){
        fileSize = document.getElementById("H_File").files[0].size;
      }
      if(fileNm != ''){
        if(fileSize > maxSize){
          alert('10MB 이하의 파일만 등록이 가능합니다.');
          fileRemove();
          return;
        }else{
          document.querySelector(".likeInput").innerText = fileName + ` [File Size: ${fileSize}]`;
        }
      }
    }
</script>
728x90