sin개발자
214
2021-02-24 19:44:12
0
99

게시글 첨부파일 질문... 도와주세요;;


Flash Player 기반 첨부파일을 수정중입니다.


우선 게시글 등록, 수정, 삭제의 첨부파일 기능 중

등록을 우선 개발을 완료한 상태입니다.


제가 막힌 부분은 수정 부분인데요.


게시글 수정에서 첨부파일도 삭제 및 추가 기능을 구현 중입니다.


먼저 게시글 등록 시 첨부파일을 어떻게 처리했는지를 약간 설명을 하자면

jsp

<form id="fileUploadForm" method="post" enctype="multipart/form-data">
   <span class="btnUi">
	<input id="fileUploadBtn" name="filename[]"  multiple="multiple" type="file" accept=".gif, .png, .jpg" onchange="fnFileUploadSelection(event);"/>
	<input id="contentsPathGb" name="contentsPathGb" type="hidden"/>
        <span  id="fileUploadBtn2" class="btn_darkgray"><a href="#LINK" onclick="JavaScript:return false;">파일 선택</a></span>
   </span>
 </form>


javascript

$(document).on("click", "#fileUploadBtn2", function (){
	$("#fileUploadBtn").trigger("click");
});

// 다중 파일 선택
function fnFileUploadSelection(event){
    $(".noDataRow").remove();
	
	// 다중 파일 선택  정보
	let fileInfo = event.currentTarget.files;
	
	if(!fnFileValidation(fileInfo)){
		fnFileListClearHtml();
		return;
	}
	
	// 중복제거
	if(fileBufferTemp.length > 0){
	    fileInfo = fnDeduplication(fileBufferTemp, fileInfo);
		console.log();
	}
	
	//초기화
	fileBuffer = [];
	fileBufferTemp = [];
    
    fileBuffer = Object.create(fileInfo);
    fileBuffer = fileBuffer.__proto__;                          // length 속성이 담겨있지 않아 다시 담기
    
    fileBufferTemp = Array.prototype.slice.call(fileBuffer);    // Object에서 배열 type으로 변환
    
//     	/*
//     	파일 업로드 후 이미지 미리보기 셋팅
	fileBufferTemp.forEach(function(f, idx, arr){
		var reader = new FileReader();
		
		reader.onload = function(e){
			let tempHtml = "";
            
            tempHtml += "<tr class='noDataRow' data-filename='" + fileBufferTemp[idx].name + "' data-type>";
                tempHtml += "<td class='all_txt'><img style='height: 83px; width: 70%; margin: 10px 5px 10px 5px;' src='" + e.target.result + "'></td>"; // 이미지
                tempHtml += "<td class='all_txt'>" + fileBufferTemp[idx].name + "</td>";    // 파일명
                tempHtml += "<td class='all_txt'>" + fileBufferTemp[idx].size + "</td>";    // 크기
    //          tempHtml += "<td class='all_txt'>" + "업로드 진행바" + "</td>"; // 업로드 진행바
    //          tempHtml += "<td class='all_txt'>" + "다운로드" + "</td>"; // 다운로드
                tempHtml += "<td class='all_txt'><img class='fileRemoveImg' style='cursor:pointer;' src='/images/gis/btn/btn_x.png'></td>"; // 삭제
            tempHtml += "</tr>";
            
            $("#noDataRow").remove();
            $("#fileAreaTable>tbody").append(tempHtml);
		}
		
		reader.readAsDataURL(f);
	})
//     	*/
	
	// input multiple 초기화
	var agent = navigator.userAgent.toLowerCase();
	if ( (navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || (agent.indexOf("msie") != -1) ) {
	   $("INPUT[name='filename[]']").replaceWith( $("INPUT[name='filename[]']").clone(true) );
	    //alert("인터넷 익스플로러 브라우저 입니다.");
	}
	else {
    	$("INPUT[name='filename[]']")[0].value = '';
	   //alert("인터넷 익스플로러 브라우저가 아닙니다.");
	}
}



let fileInfo = event.currentTarget.files

fileInfo는 readonly라서

fileBufferTemp변수에  배열타입으로 변경해서 다시 담았습니다.

그리고 이걸로 사용자가 첨부파일을 삭제 및 다시 추가 시

fileBufferTemp과 fileInfo 로 중복제거 함과 동시에 html을 갈아끼우고


게시글 등록 시

fileBufferTemp이걸로 백단에 보내서 서버에 해당 파일을 저장 하는 방법으로 개발했습니다.


---------------------------------------------------------------------------------------------------------------------


근데 이 방법으로 개발을 해놓으니까.


삭제는 그냥 다 삭제해 버리면되는데

게시글 수정 시 첨부파일을 수정, 할때 뇌정지가 오더라고요...



제가 생각한 방법은


사용자가 첨부파일을 선택, 및 삭제 할 때 의

let fileInfo = event.currentTarget.files 와


서버에서 가져온 첨부파일 리스트를 어떻게 잘 합쳐서 

하나의 변수로 만든 다음 백단으로 보내고

해당 게시물의 PK로 서버에 저장되있는 첨부파일을 모두 삭제 후


다시 View단에서 보낸 첨부파일을 insert 하는 방식을 생각 했는데


변수 합치는 방법에서 도무지 생각이 나질 않습니다...


조언 부탁드립니다.

0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.