---

Download

---

👉Download 활용 예제(깃허브 클릭)

---

Upload

---

👉Upload 활용 예제(깃허브 클릭)

---

파일 첨부 선행 작업

• http://servlets.com/ 접속
• COS File Upload Library - cos-22.05.zip 다운로드
• zip 압축 해제 후 lib/cos.jar 라이브러리 ⇀ 프로젝트 webapp/WEB-INF/lib/cos.jar

---

cos.jar

• 업로드 전용 라이브러리이다.
• 파일 첨부 폼 양식은 enctype="multipart/form-data"로 설정하는데 이렇게되면 HttpServletRequest를 사용할 수 없다.
• HttpServletRequest 대신 사용할 MultipartRequest 클래스를 지원하는 라이브러리이다.

---

• jar파일 보관 라이브러리
  • cos.jar 을 jason.jar와 같이 라이브러리에 copy해놓는다.
    

---

프론트

---

👉Forn 구현 예제(깃허브 클릭)

---

MIME Type

(Multipurpose Internet Mail Extensions)

• 파일변환을 의미한다.

---

• (이미지 파일 구분 : 이미지는 image/로 시작한다.
  • 예: image/jpeg, image/png)

---

파일 첨부 양식 예제

• 파일 첨부 시 <form>태그의 필수 속성 :
  • method="post"
  • enctype="multipart/form-data"
• enctype 속성 : <form> 태그에서 POST방식으로 데이터를 전송할 때 인코딩 타입에 대한 명시를 해주는 속성이다.
• enctype="multipart/form-data : form data가 multipart로 잡혀있으면 HttpServletRequest는 사용할 수 없다.
• "multipart"가 들어가면 전부 파일첨부를 의미한다.
• cos.jar : 파일 첨부를 처리하는 request를 제공한다.
• File 은 Parameter가 아닌 File로 받아온다.
  • 기본적으로 "요청 파라미터"라고 하면 File은 제외한걸 의미한다.

  <div>
    <h1>파일 첨부 양식</h1>
    <form action="/servlet/upload" method="post" enctype="multipart/form-data">
      <div>
        <label for="uploader">업로더</label>
        <input type="text" id="uploader" name="uploader">
      </div>
      <div>
        <label for="attach">파일첨부</label>
        <input type="file" id="attach" name="attach">
      </div>
      <div>
        <button type="submit">첨부하기</button>
      </div>
    </form>
    <div id="preview"></div>
  </div>

---

JavaScript 예제

• 파일 첨부 크기 제한 (프론트에서도 가볍게 막아줄 수 있다.)
• 파일 형식 제한
• 미리보기

  <script>  
    // <input type="file" id="attach"> 요소에 어떤 파일을 첨부하는 경우 change 이벤트가 발생한다.
   
    $('#attach').change(function() {
   
      // 첨부된 파일의 크기가 50MB(1024 * 1024 * 50) 초과이면 첨부를 못하게 막는다.
      var size = this.files[0].size;  // 첨부된 파일의 크기
      var limit = 1024 * 1024 * 50;   // 크기 제한
      if(size > limit) {
        alert('첨부 파일의 최대 크기는 50MB입니다.');
        this.value = '';  // 첨부된 파일을 취소한다.
        return;
      }
     
      // 첨부된 파일의 형식이 이미지가 아니면 첨부를 못하게 막는다.
      var type = this.files[0].type;  // 첨부된 파일의 형식
      if(!type.startsWith('image/')){
        alert('이미지만 첨부할 수 있습니다.');
        this.value = '';  // 첨부된 파일을 취소한다.
        return;
      }
     
      // 첨부된 파일 미리보기
     
      var reader = new FileReader();
      reader.readAsDataURL(this.files[0]);        // 최종적으로 파일 자체를 넘겨줌
     
      reader.onload = function(event) {           // load 이벤트 (고전 이벤트)
        var img = new Image();
        $(img).attr('src', event.target.result);  // 이미지 태그를 만들어서 src 속성을 넣는 작업
        $(img).css('width', '192px');             // 크기(너비) 조정
        $('#preview').html(img);                  // 단일 첨부이기 때문에 이미지를 하나만 보이도록 덮어쓰기(html 사용)
      }      
    })  
  </script>

---

---