다중 이미지 - Githubissues

다중이미지 사용할 경우 배열을 이용한다.

이미지를 3장까지만 입력가능하게 하기 위해

  let maxFileCnt = 3   // 첨부파일 최대 개수
  let attFileCnt = document.querySelectorAll('.filebox').length    // 기존 추가된 첨부파일 개수
  let remainFileCnt = maxFileCnt - attFileCnt    // 추가로 첨부가능한 개수
  let curFileCnt = e.target.files.length  // 현재 선택된 첨부파일 개수

  // 첨부파일 개수 확인
  // 최대 개수 초과 시
  if (curFileCnt > remainFileCnt) {
     alert("이미지는 최대 " + maxFileCnt + "개 까지 첨부 가능합니다.")
  }

해당 내용을 첨부해주었다.

다중이미지를 선택 한 후 삭제도 가능하게 기능을 추가하였으나, 미리보기 또한 지원을 해주고싶어 해당 이미지를 삭제했을 경우 이미지도 같이 삭제해주게끔 만들어야하는데

이부분을 알아봐야할 것 같다.

html

이미지 박스
<div class="post-pic-box">
  <div class="shopping-img-place">
  <!-- <ul id="Preview" class="sortable"></ul> -->
  <img alt="post 이미지" src="" class="shopping-img-place w-100 btn" id="post-file-img">
</div>
<div class="mb-3">
  <input class="d-none" type="file" id="post-file-btn" accept=".jpg, .png, .jpeg, .gif">
  <a href="#" id="fileUploadBtn"><i class="fa fa-camera text-dark fa-lg mx-3"></i></a>
<div id="fileList">
</div>

<a href="#" id="fileUploadBtn"><i class="fa fa-file text-dark fa-lg mx-3">파일 업로드</i></a>

script (document밖)

//이미지 삭제
    function delImg(_this){
        $(_this).parent('li').remove()
        delete filesArr[_this];
    }

    // 파일 프리뷰
    function preview(arr){
          arr.forEach(function(e){

            let fileName = e.name;

            // div에 이미지 추가
            let str = '<div style="display: inline-flex; padding: 10px;"><li class="filebox">';
            str += '<span>'+fileName+'</span><br>';

            // 이미지 파일 미리보기
            if(e.type.match('image.*')){
                 //파일을 읽기 위한 FileReader객체 생성
                var reader = new FileReader(); 
                reader.onload = function (e) {
                //파일 읽어들이기를 성공했을때 호출되는 이벤트 핸들러
                str += '<img src="'+e.target.result+'" title="'+e.name+'" width=80 height=80  class="filebox">';
                str += '<a href="#" onclick="delImg(this);"><i class="fa fa-times text-dark"></i></a>';
                str += '</li></div>';
                $(str).appendTo('#Preview');
                }
             reader.readAsDataURL(e);
            }
        });
    }

script (파일 선택시)

// 이미지 초기화
$('#Preview').empty();

// 미리보기
preview(filesArr);

이렇게 이미지 파일 등록, 삭제까진 되는거 확인했으나, 이미지가 최대 3개까지 지원하게끔 해주고싶었는데 그 부분은 못불러오는 듯하여 이미지 미리보기 지원없이 파일명만 확인되는 화면으로 바꾸어줬다.

betterthani / saveWallet

다중 이미지 #16