다중 업로드 커스텀 오류ㅠㅠ
다중 파일 업로드되고 파일 삭제도 가능하게 커스텀 했는데 최종 전송에서 파일이 어떻게해도 업로드가 안되는데 이유를 잘 모르겠습니다..ㅠ
사진첨부
※ 최대 10장까지 올릴 수 있어요
사진을 첨부해주세요.
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 += '
htmlData += '
';
htmlData += '';
htmlData += '
htmlData += '';
htmlData += '';
htmlData += '
$('.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: "/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개
답변을 작성하려면 로그인이 필요합니다.
로그인
들어가있습니다 ㅠㅠ