다중 업로드 커스텀 오류ㅠㅠ
본문
다중 파일 업로드되고 파일 삭제도 가능하게 커스텀 했는데 최종 전송에서 파일이 어떻게해도 업로드가 안되는데
이유를 잘 모르겠습니다..ㅠ
<div class="input_box col2">
<div class="tit_wrap">
<span class="tit">사진첨부</span>
<span class="cmt">※ 최대 10장까지 <span>올릴 수 있어요</span> </span>
</div>
<div class="file_wrap">
<div class="file_sel" id="file_sel_0">
<span>사진을 첨부해주세요.</span>
<input multiple="multiple" type="file" name="bf_file[]" id="bf_file_0" accept="image/*" data-index="0" onchange="addFile(this);" />
<label for="bf_file_0">사진첨부</label>
</div>
</div>
</div>
html태그 form 안에 파일 부분은 이렇게 작성되어있고 아래는 스크립트 코드입니다.
var fileNo = 0;
var filesArr = new Array();
/* 첨부파일 추가 */
function addFile(obj) {
var maxFileCnt = 10; // 첨부파일 최대 개수
var attFileCnt = document.querySelectorAll('.file_name').length; // 기존 추가된 첨부파일 개수
var remainFileCnt = maxFileCnt - attFileCnt; // 추가로 첨부가능한 개수
var curFileCnt = obj.files.length; // 현재 선택된 첨부파일 개수
// 첨부파일 개수 확인
if (curFileCnt > remainFileCnt) {
alert("첨부파일은 최대 " + 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() {
filesArr.push(file);
};
reader.readAsDataURL(file)
// 목록 추가
let htmlData = '';
htmlData += '<div id="file' + fileNo + '" class="file_name">';
htmlData += '<img src="<?php echo G5_IMG_URL ?>/web/icon_img.png" alt="아이콘" />';
htmlData += '<label id="fname_0">' + file.name + '</label>';
htmlData += '<button type="button" class="btn_delete" onclick="deleteFile(' + fileNo + ');">';
htmlData += '<img src="<?php echo G5_IMG_URL ?>/web/delete.svg" alt="아이콘" />';
htmlData += '</button>';
htmlData += '</div>';
$('.file_wrap').append(htmlData);
fileNo++;
} else {
continue;
}
}
// 초기화
document.querySelector("input[type=file]").value = "";
}
/* 첨부파일 검증 */
function validation(obj) {
const fileTypes = ['image/gif', 'image/jpeg', 'image/png', 'image/bmp', 'image/tif'];
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 chk_fun() {
var f = document.fwrite;
var formData = new FormData();
for (var i = 0; i < filesArr.length; i++) {
// 삭제되지 않은 파일만 폼데이터에 담기
if (!filesArr[i].is_delete) {
formData.append('bf_file[' + i + ']', filesArr[i]);
}
}
// 기존에 폼에 있던 데이터도 FormData에 추가
formData.append('uid', f.uid.value);
formData.append('w', f.w.value);
formData.append('bo_table', f.bo_table.value);
formData.append('ww', f.ww.value);
formData.append('wr_subject', f.wr_subject.value);
formData.append('html', f.html.value);
formData.append('od_id', f.od_id.value);
formData.append('ret', f.ret.value);
formData.append('wr_1', f.wr_1.value);
formData.append('wr_name', f.wr_name.value);
formData.append('wr_2', f.wr_2.value);
formData.append('wr_3', f.wr_3.value);
formData.append('wr_content', f.wr_content.value);
if (!f.agreecheck.checked) {
alert("개인정보 수집 및 이용에 동의해 주세요");
return false;
}
$.ajax({
url: "<?php echo G5_BBS_URL ?>/write_update.php",
type: "POST",
data: formData,
async: true,
timeout: 30000,
cache: false,
headers: {
'cache-control': 'no-cache',
'pragma': 'no-cache'
},
success: function(response) {
// 전송 성공 시의 처리
console.log(response);
// 여기서 서버로부터의 응답을 처리할 수 있습니다.
},
error: function(xhr, status, error) {
// 전송 실패 시의 처리
console.error(xhr, status, error);
}
});
return false; // 기본 폼 제출 동작 막기
}
모두 원하는대로 동작되는데 사진 업로드만 안됩니다..
답변 부탁드립니다ㅠㅠㅠ
답변 2
<form 부터 작성해주세요
enctype="multipart/form-data"
가 안들어있을 수 있습니다.
ajax로 파일 업로드 시
contentType : false,
processData : false
두개의 옵션을 추가해 주세요