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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
다중 업로드 커스텀 오류ㅠㅠ

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">
들어가있습니다 ㅠㅠ

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

회원로그인

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