[Javascript 개발] 자바스크립트 파일선택 이벤트 처리하기!

Table of Contents

자바스크립트 이벤트 처리하기

<script type="text/javascript"> 
    function fileUpload(fis) {
      var str = fis.value;
      alert("파일네임: "+ fis.value.substring(str.lastIndexOf("\\")+1));
    }
  </script> 

 <input type="file" onchange="fileUpload(this)">

–> 요런식으로 처리하면 현재 파일선택된 이미지나 파일이름이 무엇인지 알 수 있습니다!

자바스크립트에서 간단하게 파일이름 처리하는 거 말고 제이쿼리로도 파일이름을 처리하는 게 있는게 한번 소스코드를 살펴보겠습니다!

Jquery 이벤트 처리하기

<script>
  $(function() {  

  $("#m_file").change(function(e){
 
    alert($('input[type=file]')[0].files[0].name); //파일이름
       alert($("#m_file")[0].files[0].type); // 파일 타임
       alert($("#m_file")[0].files[0].size); // 파일 크기
 //  $('input[type=file]')[0].files[0].name;
 //  $("#imgUpload")[0].files[0].type;
 //  $("#imgUpload")[0].files[0].size;
 
    });

});

  </script>
 

  <input type="file" name=m_file id="m_file" accept="video/*" capture="camcorder" />

–> 이런식으로 제이쿼리로 파일업로드해서 파일이름이나 크기 등등의 내용을 알림창으로 보여줄 수 있습니다!