드래그 멀티파일 업로드

 

ㅁ HTML

<div class="cont drop-area">
</div>

 

ㅁ CSS

.drop-area {
    border: 2px dashed #ccc;
    border-radius: 20px;
    width: 100%;
    /*margin: 50px auto;*/
    padding: 20px;
}

.drop-area.highlight {
    border-color: hotpink;
    /*border : solid;*/
}

 

JAVASCRIPT

//2024.01.16 CHU 드래그 업로드
       // let dropArea = document.getElementById('drop-area');
       const fileUpload = (data,idx) => {
          // console.log('data : ',data);
          // console.log('idx : '+idx);
          //화면 처리
       }

       let dropAreas = document.getElementsByClassName('drop-area');

       Array.from(dropAreas).forEach(dropArea => {
          ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
             dropArea.addEventListener(eventName, preventDefaults, false);
          });

          ['dragenter', 'dragover'].forEach(eventName => {
             dropArea.addEventListener(eventName, highlight, false);
          });

          ['dragleave', 'drop'].forEach(eventName => {
             dropArea.addEventListener(eventName, unhighlight, false);
          });

          dropArea.addEventListener('drop', handleDrop, false);
       });
       
       //이벤트 방부제 처리
       function preventDefaults (e) {
          e.preventDefault();
          e.stopPropagation();
       }

       function highlight(e) {
          e.currentTarget.classList.add('highlight');
       }

       function unhighlight(e) {
          e.currentTarget.classList.remove('highlight');
       }

       function handleDrop(e) {
          let data = e.dataTransfer;
          let files = data.files;
          // console.log('e ',e.target);
          // console.log('fild id ',$(e.target).parents('.drop-area').find(':file').attr('id'));
          
          const idx = $(":file").index($('#'+$(e.target).parents('.drop-area').find(':file').attr('id')));
          // console.log('idx : ',idx);
          if (data.items) { // DataTransferItemList 객체 사용
             console.log('파일 수 : '+data.items.length);
             fileAmount = 0;
             fileAmount = data.items.length;
             let target = $("#item_tab3 .entered:eq("+idx+")").prev();
             let p_html = `<p class="p_amount" style="color: black;margin-top:50px;"><span class="Amount" style="color">0</span> / <span style="color: hotpink">`+fileAmount+`</spa> 업로드 중</p>`
             target.append(p_html);

             for (var i = 0; i < data.items.length; i++) { // DataTransferItem 객체 사용
                if (data.items[i].kind == "file") { // 아이템 종류가 파일이면
                   var file = data.items[i].getAsFile(); // File API 사용
                   // console.log('file : ',file);
                   // console.log('file : '+file.name);
                   // alert('1 : '+file.name);
                }
             }
          } else { // File API 사용
             for (var i = 0; i < data.files.length; i++) {
                // alert('2 : '+data.files[i].name);
                console.log('else ',data.files[i].name)
             }
          }

          handleFiles(files,idx,data.items.length);
       }

       function handleFiles(files,idx,amount) {
          // console.log('handleFiles In');
          [...files].forEach((file, fileIndex) => uploadFile(file, idx,amount));
       }

       /**
        *
        * @param file
        * @param idx
        * @param amount 파일 갯수
        * @returns {Promise<void>}
        */

       async function uploadFile(file,idx,amount) {
          // console.log('uploadFile idx',idx);
          let url = "/s/comm/file/uploadFileThumbAjax.do";
          let formData = new FormData();
          let imgName ='';
          if(idx==0 || idx==1){
             imgName = "P";
          }
          formData.append('file', file);
          formData.append('idxName', imgName);
          fn_showProgressBar();
          const response = await fetch(url, {
             method: 'POST'
             ,body: formData
          })
          .then(async response => {
             //프로그래스 바 처리
             fn_hideProgressBar();
             fileAmount = $("#item_tab3 .entered:eq("+idx+")").prev().find('.Amount').text()*1+1;
             $("#item_tab3 .entered:eq("+idx+")").prev().find('.Amount').text(fileAmount);
             amount === fileAmount ? blinkAndFadeOut($("#item_tab3 .entered:eq("+idx+")").prev().find('.p_amount'), 3000) : '';
             //프로그래바 처리 끝

             // response.ok는 HTTP 상태 코드가 200-299인 경우 true를 반환합니다.
             if (!response.ok) {
                console.log('Error : ', response);
                throw new Error('Network response was not ok');
             }
             /*
             fieldName : file
             fileNm : a4d1feef917846c1b83003a4a58ccfda.png
             fileOrgNm : 스크린샷 2024-01-11 150153.png
             fileUrl : /common/temp
             fileFullUrl : /common/temp/a4d1feef917846c1b83003a4a58ccfda.png
              */
             const data = await response.json();
             for( let files of data['fileInfo']){

                fileUpload(files,idx);
             }

             // return response.json(); // 서버로부터 받은 JSON 데이터를 파싱합니다.
          })
          .catch(error => {
             // 네트워크 오류 또는 response.ok가 false인 경우의 에러 처리
             console.log('Fetch 에러:', error);
          });

          // console.log('성공:', data);
       }