ajax 첨부파일 문의
본문
멀티 첨부파일 업로드 ajax 만들어 보고 있는데요 안되는 부분이 있어서 고수님들의 도움이 필요합니다...
멀티로 첨부파일 등록 후 일부 첨부파일을 삭제하게 되면 남아 있는 파일을 ajax에 formDate에서 검수해서 남아 있는 값만 넘기는 형식인데요 넘긴 php 파일에서 아무것도 넘어 오지 않고 있어요 ㅠ 뭐가 문제인지 모르겠어요 아래 코드 보시고 문제점도 알려주실 수 있을 까요??
<form name="testf" id="testf" method="post" enctype="multipart/form-data"action="./upload-test.php">
<input type="text" name="name" value="" id="names">
<div class="use_photo flexWrap">
<div class="photo_list">
<ul class="use_files" id="photoAttach"></ul>
</div>
<input type="file" multiple="multiple"id="input_imgs" onchange="addFile(this);" name="File[]">
</div>
<button type="button" class="btn_submit" onclick="submitForm();">버튼</button>
</form>
js =========================================
<script>
var fileNo = 0;
var filesArr = new Array();
/* 첨부파일 추가 */
function addFile(obj){
var maxFileCnt = 4; // 첨부파일 최대 개수
var attFileCnt = document.querySelectorAll('.filebox').length; // 기존 추가된 첨부파일 개수
var remainFileCnt = maxFileCnt - attFileCnt; // 추가로 첨부가능한 개수
var curFileCnt = obj.files.length; // 현재 선택된 첨부파일 개수
// 첨부파일 개수 확인
if (curFileCnt > remainFileCnt) {
alert("첨부파일은 최대 " + maxFileCnt + "개까지 선택할 수 있으므로 선택한 사진 중 " + maxFileCnt + "개만 첨부합니다.");
}
for (var i = 0; i < Math.min(curFileCnt, remainFileCnt); i++) {
const file = obj.files[i];
// 첨부파일 검증
if (validation(file)) {
// 파일 배열에 담기
var reader = new FileReader();
reader.onload = function (e) {
filesArr.push(file);
// 목록 추가
let htmlData = '';
htmlData += '<li id="file' + fileNo + '" class="filebox">';
htmlData += '<img src=\"' + e.target.result + '\" >';
htmlData += '</li>';
$('.use_files').append(htmlData);
fileNo++;
};
reader.readAsDataURL(file)
} else {
continue;
}
}
}
/* 첨부파일 검증 */
function validation(obj){
const fileTypes = ['image/gif', 'image/jpeg', 'image/png', 'image/jpg'];
if (obj.name.length > 100) {
alert("파일명이 100자 이상인 파일은 제외되었습니다.");
return false;
} else if (obj.size > (100 * 1024 * 1024)) {
alert("최대 파일 용량인 100MB를 초과한 파일은 제외되었습니다.");
return false;
} else if (obj.name.lastIndexOf('.') == -1) {
alert("확장자가 없는 파일은 제외되었습니다.");
return false;
} else if (!fileTypes.includes(obj.type)) {
alert("첨부가 불가능한 파일은 제외되었습니다.");
return false;
} else {
return true;
}
}
/* 첨부파일 삭제 */
function deleteFile(num) {
document.querySelector("#file" + num).remove();
filesArr[num].is_delete = true;
}
//폼 전송
function submitForm() {
event.preventDefault();
// 폼데이터 담기
var form = document.querySelector("#testf");
var formData = new FormData();
for (var i = 0; i < filesArr.length; i++) {
// 삭제되지 않은 파일만 폼데이터에 담기
if (!filesArr[i].is_delete) {
//console.log(filesArr[i]);
formData.append("File", filesArr[i]);
}
}
console.log(formData); 값이 없음 ㅠㅠㅠㅠ
$.ajax({
method: 'POST',
url: "./upload-test.php",
enctype : 'multipart/form-data',
data: formData,
async: true,
cache: false,
contentType:false,
processData: false,
success: function () {
location.href = "./upload-test.php";
alert('통신성공');
},
error:function(request, error) {
//alert('에러가 발생 하였습니다.');
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
return;
}
});
}
</script>
========================================================
upload-test.php
echo '<pre>';
var_dump($_FILES);
echo '</pre>';
이렇게 찍어봤을 때 array(0) {} 으로 아무것도 넘어오지 못하고 있는데요 혹시 뭐가 문제 일까요?