[javascript] 게시판 작성하기1 - 파일 다중 첨부 기능 구현하기(프론트)

sweet0828 2023. 5. 14. 14:00

처음 게시판 형식의 프론트 단을 구현하다보면 가장 오랫동안 고민하는 부분이 바로 파일첨부 기능이 아닌가 싶다.

일반적으로는 한개의 파일 첨부 버튼으로 다중 파일 첨부를 많이 하고, 이를 구현하기 위해 찾았던 방법이다.

실제 현업에서 구현한 코드는 좀 더 복잡했으나, 간결하게 만든 기본 원리는 다음과 같다.

--- 코드

var filesArray1 = new Array();
var fileNum1 = 0;
var fileCount1 = 0;
var totalCount1 = 5;
var fileList1= "";

function fileUpload1(e){

var files1 = e.files;
var thisFile1 = e

var fileArr1 = Array.prototype.slice.call(files1);

if(fileCount1 + fileArr1.length > totalCount1){
alert("업로드 갯수를 초과하였습니다..");
return;
}

else{
fileCount1 = fileCount1 + fileArr1.length;
}

fileArr1.forEach(function(f){

var reader = new FileReader();
reader.onload = function(e){

filesArray1.push(f);
contents_file[fileNum1].is_delete = false;
fileList1 = '<li id="file1_'+fileNum1 +'"<sapn><label>'+ f.name+'  </label></span><input type="button" value="파 일삭제" ';
fileList1 += 'onclick="fileDelete1(\)"'+ fileNum1 + '\")"/></li>';

//파일첨부 목록 등록
$("#삽입할위치 아이디").append(fileList1);

}
reader.readAsDataURL(f);
});

}

//파일삭제
function fileDelete1(fileNum1){

var num1 = fileNum1.replace(/[^0-9]/g,"");

if(filesArray1.length > 0 ){
filesArray1[0].is_delete= true;
}

$("#file1_"+ fileNum1).hide();

if(fileCount1 > 0){
fileCount1 -- ;
}
}

+) onclick이 아니라, onchange이벤트를 걸어 값이 변화했을 때 작동해야함을 주의하자.

+) 다중 버튼 - 다중파일 첨부의 경우 여러방법을 찾아보았으나, 가장 간단한 방법은 다음과 같이 함수명2를 별도로 생성하여 구현하는 것이다.

ex)