업로드 input 추가 , 파일 선택시 이미지 추출

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

   

<%@ include file="inc/header.jsp" %>  

<style>

   #div-file button{position: relative;

    right: -73px;

    top: -97px;

    z-index: 10;

    display: none;

    }

</style>

<div class="container w-50 shadow rounded border p-5 mt-5">

<form action="${ctxPath}/memberInsert.do" method="post">

         <h3 colspan="2"  class="text-center mb-4">파일업로드</h3>

         <input class="form-control mb-2" type="text" name="id" placeholder="아이디"/>

       <input class="form-control mb-2" type="text" name="pw" placeholder="비밀번호"/>

     

     

          <div class="row">

               <div class="col-md-4 col-sm-6">

                  <input class="form-control mb-2 btn btn-outline-secondary" type="button" value="업로드 파일 추가" onClick="fileAppend()"/>

               </div>

               <div class="col-md-4 col-sm-6">

                  <input class="form-control mb-2 btn btn-outline-secondary" type="button" value="업로드 파일 취소" onClick="fileRemove()"/>

               </div>

          </div>

          <div id="div-file">

            <img src="" alt="">

          </div>

       

        <div class="text-center pt-4">

         <button class="btn btn-primary form-control">파일업로드</button>

        </div>

     

           

   </form>

   

</div>

<script>

   var cnt = 1;

   function fileAppend(){

      var fileElement = "<input type='file' class='form-control file-wrap' name='file"+cnt+"' onChange='preViewImg(this)'>" + "<img src='' alert=''/><button type='button' class='btn-close' onClick='resetInput(this)'></button>";

     

      //jQuery의 append() : html 태그를 추가

      $("#div-file").append(fileElement);

      cnt++;

   }

   function fileRemove(){

      // $("#div-file button").find()

      $("#div-file").empty();

   }

   // 삭제버튼 선택시 동작 함수

   function resetInput(obj){

      var imgTag = obj.previousSibling; //이전 형제요소 선택

      var inputTag = obj.previousSibling.previousSibling;

      inputTag.value="";

      inputTag.style.display="none";

      imgTag.src="";

      imgTag.width=0;

      imgTag.height=0;

      obj.style.display="none";

   }

   //파일 선택시 동작 함수

   function preViewImg(obj){

      alert("~~~~~");

      var imgTag = obj.nextSibling; //nextSibling : 다음태그 ( 다음형제요소) <img> 선택

      var buttonTag = obj.nextSibling.nextSibling;

      // input type="file" 이면 내부적으로 선택한 파일을 저장하기 위한 FileList객체를 갖는다.

      // 이객체에 접근하기 위해서는 files를 이용하면되고

      //FileList는 배열객체로 보면됨. 3개의 파일이 선택되면 files[0],files[1],files[2]에 각각 파일이 저장된다.

      //   console.log(obj.files);

      if(obj.files && obj.files[0]){ //파일이 선택되면

            //파일을 읽어오기 위한 객체 생성

            var fileReader = new FileReader(); //js의 라이브러리 (API)

            //fileReader.onload는 파일을 성공적으로 읽었을 때 발생하는 이벤트

            fileReader.onload = function(e){

               //e.target(이벤트가 발생한 대상) == fileReader

               imgTag.width =100;

               imgTag.height =100;

               imgTag.src = e.target.result; //파일을 읽어온 결과값(바이너리)

               buttonTag.style.display="block"; //버튼을 보이게함

            }

           

            //바이너리 파일을 base64 형식으로 변환해줌

            fileReader.readAsDataURL(obj.files[0]);

            //파일종류를 크게 2가지로 분류하면

            //1) 바이너리 (말그대로 2진형태의 파일)

            //2) 텍스트 파일

            //Base64(2^6) 는 binary dat를 문자열로 바꾸는 64비트 인코딩방식의 하나. (2의 6승)

            //아스키는 7비트라 계산하기 복잡하여 Base64로 인코딩하는게 안정적임

            //Base64는 binary data의 훼손없이 정확하게 데이터를 전달할 수 있다.

      }

   }

</script>

<%@ include file="inc/footer.jsp" %>