드래그 앤 드롭 파일 업로드(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
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>
답변을 작성하시기 전에 로그인 해주세요.