reProject_25_[ 보류 ] DROPZONE 이미지 드래그해서 업로드하기

reProject_24_프로젝트 중간 점검

2024.01.15-16 작업내용

2024.01.15-16

작업내용

1. Web 화면 추가
	1) admin
		- product
			- productList.jsp
		- order
			- orderList.jsp
2. Java 추가 작업
	1) product
		- ProductVO
		- ProductPriceVO
		- OptionVO
		- ProductDAO
	2) product.service
		- ProductService
		- ProductServiceImpl
	3) util
		- ImageVO
	4) order
		- OrderVO
		- OrderInfoVO
		- OrderDAO
	5) order.service
		- OrderService
		- OrderServiceImpl
3. Java Resource
	1) mybatis-config.xml 추가
		- ProductVO
		- ProductPriceVO
		- OptionVO
		- ImageVO
		- OrderVO
	2) mapping 파일 추가
		- product-mapping.xml 
		- order-mapping.xml

 

 

2024.01.17

DROPZONE 사용하기

Dropzone.js

- 앞단에서 사용하는 대표적인 파일 업로드 라이브러리

- 드래그/드롭을 지원

- 애니메이션이 적용되어 파일 첨부 상호작용이 좋음(커스텀 가능)

- 썸네일 미리보기 지원

- Amazon S3 멀티파트 업로드도 지원

 

-- Dropzone 옵션

---- 기본 설정으로 파일을 올리는 순간 서버로 전송

------ header값을 설정해야 함

---- 여러 개의 파일을 동시에 올리려면 추가 설정으로 작업해야 함

---- 중복된 파일을 올릴 수 없게 하려면 함수를 작성해야 함

---- 새로운 파일을 추가하는 경우에만 파일을 전송할 수 있음

------ 기존 파일이 남아있고 업데이트를 하는 경우 다른 방식으로 파일을 보내야 함

 

 

1) form 태그에 class="dropzone" 작성하는 경우 자동으로 dropzone 영역이 생성

> script에서 Dropzone.options.[ form 태그 id 값 ]={ 실행할 함수 작성 }

<form class="dropzone" id="dropZone" action="/target"></form>

<script>
	Dropzone.discover();
    Dropzone.options.dropZone ={
    	url: "실행할 함수",
        method: "GET/POST",
        ... //옵션
    }
</script>

 

 

2) div 태그 선언해 생성자로 드롭존 영역을 생성

<div class="dropzone"></div>

<script>
	// deprecated 옵션
	Dropzone.autoDiscover = false;
    const dropzone = new Dropzone("div.dropzone", {
    	url: "실행할 함수",
        method: "GET/POST",
        ...
    });
</script>

 

 

<script>
Dropzone.autoDiscover = false; // deprecated 된 옵션. false로 해놓는걸 공식문서에서 명시
const dropzone = new Dropzone('div.my-dropzone', {
  
   url: 'https://httpbin.org/post', // 파일을 업로드할 서버 주소 url.
   method: 'post', // 기본 post로 request 감. put으로도 할수있음
   headers: {
      // 요청 보낼때 헤더 설정
      Authorization: 'Bearer ' + token, // jwt
   },

   autoProcessQueue: false, // 자동으로 보내기. true : 파일 업로드 되자마자 서버로 요청, false : 서버에는 올라가지 않은 상태. 따로 this.processQueue() 호출시 전송
   clickable: true, // 클릭 가능 여부
   autoQueue: false, // 드래그 드랍 후 바로 서버로 전송
   createImageThumbnails: true, //파일 업로드 썸네일 생성

   thumbnailHeight: 120, // Upload icon size
   thumbnailWidth: 120, // Upload icon size

   maxFiles: 1, // 업로드 파일수
   maxFilesize: 100, // 최대업로드용량 : 100MB
   paramName: 'image', // 서버에서 사용할 formdata 이름 설정 (default는 file)
   parallelUploads: 2, // 동시파일업로드 수(이걸 지정한 수 만큼 여러파일을 한번에 넘긴다.)
   uploadMultiple: false, // 다중업로드 기능
   timeout: 300000, //커넥션 타임아웃 설정 -> 데이터가 클 경우 꼭 넉넉히 설정해주자

   addRemoveLinks: true, // 업로드 후 파일 삭제버튼 표시 여부
   dictRemoveFile: '삭제', // 삭제버튼 표시 텍스트
   acceptedFiles: '.jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF', // 이미지 파일 포맷만 허용

   init: function () {
      // 최초 dropzone 설정시 init을 통해 호출
      console.log('최초 실행');
      let myDropzone = this; // closure 변수 (화살표 함수 쓰지않게 주의)

      // 서버에 제출 submit 버튼 이벤트 등록
      document.querySelector('버튼').addEventListener('click', function () {
         console.log('업로드');

         // 거부된 파일이 있다면
         if (myDropzone.getRejectedFiles().length > 0) {
            let files = myDropzone.getRejectedFiles();
            console.log('거부된 파일이 있습니다.', files);
            return;
         }

         myDropzone.processQueue(); // autoProcessQueue: false로 해주었기 때문에, 메소드 api로 파일을 서버로 제출
      });

      // 파일이 업로드되면 실행
      this.on('addedfile', function (file) {
         // 중복된 파일의 제거
         if (this.files.length) {
            // -1 to exclude current file
            var hasFile = false;
            for (var i = 0; i < this.files.length - 1; i++) {
               if (
                  this.files[i].name === file.name &&
                  this.files[i].size === file.size &&
                  this.files[i].lastModifiedDate.toString() === file.lastModifiedDate.toString()
               ) {
                  hasFile = true;
                  this.removeFile(file);
               }
            }
            if (!hasFile) {
               addedFiles.push(file);
            }
         } else {
            addedFiles.push(file);
         }
      });

      // 업로드한 파일을 서버에 요청하는 동안 호출 실행
      this.on('sending', function (file, xhr, formData) {
         console.log('보내는중');
      });

      // 서버로 파일이 성공적으로 전송되면 실행
      this.on('success', function (file, responseText) {
         console.log('성공');
      });

      // 업로드 에러 처리
      this.on('error', function (file, errorMessage) {
         alert(errorMessage);
      });
   },
   
});
</script>

 

-- 조금 더 찾아봐야 할 것 같다.

reProject_26_관리자 상품관리 페이지