다중 업로드 커스텀 오류ㅠㅠ

다중 업로드 커스텀 오류ㅠㅠ

QA

다중 업로드 커스텀 오류ㅠㅠ

본문

다중 파일 업로드되고 파일 삭제도 가능하게 커스텀 했는데 최종 전송에서 파일이 어떻게해도 업로드가 안되는데
이유를 잘 모르겠습니다..ㅠ

 

<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"

가 안들어있을 수 있습니다.

<form name="fwrite" id="fwrite" action="<?php echo G5_BBS_URL ?>/write_update.php" method="post" enctype="multipart/form-data" autocomplete="off" onsubmit="return chk_fun();" class="contact_form">
들어가있습니다 ㅠㅠ

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

회원로그인

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