드래그 앤 드롭 파일 업로드(drag & drop) 질문

드래그 앤 드롭 파일 업로드(drag & drop) 질문

QA

드래그 앤 드롭 파일 업로드(drag & drop) 질문

본문

안녕하세요

input 파일을 변경 시 이미지 미리보기는 구현되어있는 상태입니다.



<label for="reg_file" style="background-image:url(/add_file.png)"></label>
<input type="file" name="reg_file" id="reg_file" class="upload-hidden"
            onchange="upload_preview(this);">

 

드래그 앤 드롭 파일 업로드(drag & drop) 추가 하기 위한 밑작업은 해두었습니다.



<div class="input-group" id="drop">
	<div class="filebox">
		<label for="reg_file" style="background-image:url(/add_file.png)"></label>
		<input type="file" name="reg_file" id="reg_file" class="upload-hidden"
            		onchange="upload_preview(this);">
	</div>
</div>

<script>
let $drop = $("#drop");
  $drop.on("dragenter", function (e) {  //드래그 요소가 들어왔을때
    $(this).addClass('drag-over');
  }).on("dragleave", function (e) {  //드래그 요소가 나갔을때
    $(this).removeClass('drag-over');
  }).on("dragover", function (e) {
    e.stopPropagation();
    e.preventDefault();
  }).on('drop', function (e) {  //드래그한 항목을 떨어뜨렸을때
    e.preventDefault();
    $(this).removeClass('drag-over');
    let files = e.originalEvent.dataTransfer.files; //드래그&드랍 항목
    for(let i = 0; i < files.length; i++) {
      if (0 < i) {
        alert("정산에 필요한 영수증 하나만 올려주세요.")
        break;
      }
      let file = files[i];

      // TODO 이미지 미리보기, reg_file에 파일 등록
      $("#reg_file").on('change','#reg_file' , function(){ upload_preview(this); });

    }
  });
</script>

 

현 상황에서 막히는 부분은 'reg_file에 파일 등록'입니다.

input type= 'file' 인 input 파일을 Jquery로 변경하려면 어떻게 해야할까요?

이 질문에 댓글 쓰기 :

답변 1

https://developer.mozilla.org/en-US/docs/Web/API/FormData/set

참조하시면 될것 같습니다.

let formData = new FormData($("#formID")[0]);
      formData.set('reg_file', file, file.name);
      console.log((formData.get('reg_file'))); // 여기에선 값이 확인됩니다.
      console.log($("#reg_file").val());// 여기에선 없고, submit에서도 확인이 안됩니다. ㅠㅠ

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
이걸로 확인해보세요


<?php
function printr($arr) {
    print('<pre>');
    print_r($arr);
    print('</pre>');
}

echo 'POST';
printr($_POST);
echo 'FILES';
printr($_FILES);

// $add_file_icon = '/add_file.png';
$add_file_icon = 'https://img.icons8.com/officexs/512/add-file.png';
?>

<style>
#preview {
    border: 1px solid #000;
    width: 300px;
    height: 150px;
    margin: 1em 0;
}

#drop {
    background-color: #ddd;
    height: 5em;
}
</style>

<div id="preview"></div>

<form id="frm" method="post" enctype="multipart/form-data">
<input type="submit" />
    <input type="hidden" name="h-1", value="v-1" />
<div class="input-group" id="drop">
    <div class="filebox">
        <label for="reg_file" style="background-image:url(<?php echo $add_file_icon; ?>)"></label>
        <input type="file" name="reg_file" id="reg_file" class="upload-hidden" />
    </div>
</div>
<input type="submit" />
</form>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
let $drop = $("#drop");
  $drop.on("dragenter", function (e) {  //드래그 요소가 들어왔을때
    $(this).addClass('drag-over');
  }).on("dragleave", function (e) {  //드래그 요소가 나갔을때
    $(this).removeClass('drag-over');
  }).on("dragover", function (e) {
    e.stopPropagation();
    e.preventDefault();
  }).on('drop', function (e) {  //드래그한 항목을 떨어뜨렸을때
    e.preventDefault();
    $(this).removeClass('drag-over');
    let files = e.originalEvent.dataTransfer.files; //드래그&드랍 항목
    console.log(files);
    for(let i = 0; i < files.length; i++) {
      if (0 < i) {
        alert("정산에 필요한 영수증 하나만 올려주세요.")
        break;
      }
      let file = files[i];

      // set
      const dT = new DataTransfer();
      dT.items.add(file);
      document.getElementById('reg_file').files = dT.files;

      // preview
      const fr = new FileReader();
      fr.onload = upload_preview;
      fr.readAsDataURL(file);
    }
  });

function upload_preview(evt) {
    $('#preview').html('<img src="' + evt.target.result + '" height="100%" />');
}
</script>

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT