이미지 파일 업로드/프리뷰/삭제/드래그로 위치변경

밍구몬님의 코드 활용

ming9mon.tistory.com/94

jQuery 파일 업로드 미리보기(preview)

 

html

 

<!--드래그 앤 드롭-->

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>

<div class="filebox clearfix">
    <div class="inputFile">
        <label for="AddImgs" class="addImgBtn">+</label>
        <input type="file" id="AddImgs" class="upload-hidden" accept=".jpg, .png, .gif" multiple>
    </div>
    <ul id="Preview" class="sortable"></ul>
</div>

 

css(filebox는 <input[type="file"] custom> 글 참고)

 

.inputFile,
#Preview,
#Preview li{
    float:left
}
.inputFile{
    margin-bottom: 10px;
}
.addImgBtn{
    width: 80px !important;
    height: 80px !important;
    line-height: 71px !important;
    background-color: #fff !important;
    color: #b7b7b7 !important;
    border: 2px solid #b7b7b7;
    font-size: 35px !important;
    padding: 0 !important;
}

#Preview{
    margin-left: 20px;
    width: 650px;
}
#Preview li{
    margin-left: 10px;
    margin-bottom: 10px;
    position: relative;
    border: 1px solid #ececec;
    cursor:move
}
.delBtn{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13px;
    background-color: #000;
    color: #fff;
    width: 18px;
    height: 18px;
    line-height: 16px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

 

js

 

$(function(){
  //드래그 앤 드롭
  $(".sortable").sortable();
  
  //이미지 등록
  $("#AddImgs").change(function(e){
      //div 내용 비워주기
      $('#Preview').empty();

      var files = e.target.files;
      var arr = Array.prototype.slice.call(files);

      //업로드 가능 파일인지 체크
      for(var i=0; i<files.length; i++){
          if(!checkExtension(files[i].name,files[i].size)){
              return false;
          }
      }
      preview(arr);

      function checkExtension(fileName,fileSize){
          var regex = new RegExp("(.*?)\.(exe|sh|zip|alz)$");
          var maxSize = 20971520;  //20MB

          if(fileSize >= maxSize){
              alert('이미지 크기가 초과되었습니다.');
              $("#AddImgs").val("");  //파일 초기화
              return false;
          }

          if(regex.test(fileName)){
              alert('확장자명을 확인해주세요.');
              $("#AddImgs").val("");  //파일 초기화
              return false;
          }
          return true;
      }

      function preview(arr){
          arr.forEach(function(f){
              //파일명이 길면 파일명...으로 처리
              /*
              var fileName = f.name;
              if(fileName.length > 10){
                  fileName = fileName.substring(0,7)+"...";
              }
              */

              //div에 이미지 추가
              var str = '<li class="ui-state-default">';
              //str += '<span>'+fileName+'</span><br>';

              //이미지 파일 미리보기
              if(f.type.match('image.*')){
                  //파일을 읽기 위한 FileReader객체 생성
                  var reader = new FileReader(); 
                  reader.onload = function (e) { 
                      //파일 읽어들이기를 성공했을때 호출되는 이벤트 핸들러
                      str += '<img src="'+e.target.result+'" title="'+f.name+'" width=80 height=80>';
                      str += '<span class="delBtn" onclick="delImg(this)">x</span>';
                      str += '</li>';
                      $(str).appendTo('#Preview');
                  } 
                  reader.readAsDataURL(f);
              }else{
                  //이미지 파일 아닐 경우 대체 이미지
                  /*
                  str += '<img src="/resources/img/fileImg.png" title="'+f.name+'" width=60 height=60 />';
                  $(str).appendTo('#Preview');
                  */
              }
          })
      }
  })

  //이미지 삭제
  function delImg(_this){
      $(_this).parent('li').remove()
  }
})

 

 

결과

 

도움이 되셨다면 ❤ 한번만 부탁드립니다.

요즘 도통 일에 보람이 없어서요 주륵

누군가에게 도움이 되었다는 것을 확인받고 싶네요 🙏