[JS] 첨부파일 FormData 로 보낼 때, java 에서 object인식 못하는 문제 해결

 

<tr>
    <th scope="row">첨부파일</th>
    <td colspan="3">
        <div class="file-upload type03 fix-width">
            <label for="files" class="btn default"><span>파일 업로드</span></label>
            <input type="file" id="files" class="file-input" name="files[]" multiple />
            <c:if test="${noticeInfoMap.fileList ne null}">
                <c:forEach var="fileList" items="${noticeInfoMap.fileList}">
                    <div class="pip" id="atchFileSn${fileList.atchFileSn }">
                        <img class="imageThumb" src="/images/admin/cmpt/file-ico.png">
                        <span class="file-tit"><a href="javascript:void(0);" onclick="downloadFileBtn(${fileList.atchFileSn}, 'FILE04')">${fileList.orgnFileNm}</a></span>
                        <button type="button" class="remove" onclick="removeFileIcon(this, ${fileList.atchFileSn})">
                            Remove image
                        </button>
                    </div>
                </c:forEach>
            </c:if>
        </div>
    </td>
</tr>

var noticeData = new FormData();
var deletedFileSn = '';

// 첨부파일 삭제
function removeFileIcon(obj, atchFileSn){
    $(obj).parent(".pip").remove();
    var fileName = $(obj).parent('.pip').find('.file-tit').text();

    // 새로 추가된 파일일 경우에만,
    if(atchFileSn == undefined || atchFileSn == null || atchFileSn == ''){
        for(i=0; i<fileArr.length; i++){
            if(fileArr[i].name == fileName){
                fileArr.splice(i, 1);
            }
        }
    // 이미 존재하던 파일을 삭제했을 경우, 삭제한 파일의 SN 담기
    }else{
        if(deletedFileSn == ''){
            deletedFileSn = atchFileSn;
        }else{
            deletedFileSn = deletedFileSn +','+ atchFileSn;
        }
    }
   
}

// 수정
function updateNotice(){

    for(var i=0; i < fileArr.length; i++){
        noticeData.append("addAttachedFile", fileArr[i]);
    }

    // 기존 등록되어있는 파일을 삭제한 경우
    if(deletedFileSn != ''){
        noticeData.append('deletedFileSn', deletedFileSn);
    }
    noticeData.append("brdMngSn", noticeInfo);

    $.ajax({
        url : 원하는 url,
        type: 'POST',
        data: noticeData,
        enctype: 'multipart/form-data',
        dataType : 'json',
        processData: false,
        contentType: false,
        success : function(data) {
        },
        error : function(data){
        }
    })
}

기존에는 

이미 존재하던 파일을 삭제했을 경우, 삭제한 파일의 SN을 [ ] array 에 담아서 수정 function 에서 FormData로 선언되어진 noticeData에 append 를 이용해서 array 자체를 담아서 보냈다.

그래서 java 단에서 받아온 map을 키로 찾아서 List 로 cast를 시도했는데, String 을 List로 cast 할 수 없다며 에러가 발생했다. 그래서 Object자체를 그대로 받아오지 못하는 것 같았다.

그래서 말씀드리니, Deep Copy 를 해야한다고 하셧다. 근데 그거는 오히려 너 복잡할 수 있어서. array 로 보내지않고

결 국, 해결 방법!!!

[ 값, 값] 이런식으로 담아서 보냈다.

그걸 사용한 부분이

반응형

// 첨부파일 삭제
function removeFileIcon(obj, atchFileSn){
    if(deletedFileSn == ''){
        deletedFileSn = atchFileSn;
    }else{
        deletedFileSn = deletedFileSn +','+ atchFileSn;
    }
}

이부분!

그래서 자바단에서 split을 이용해 String[] 의 형식으로 바꿔 사용해서 List를 대체해서 사용했다!!!!

java

public HashMap<String, Object> updateBoard(HashMap<String, Object> map, MultipartHttpServletRequest request){
    HashMap<String, Object> resultMap = new HashMap<String, Object>();
    // 기존파일 삭제 정보가 존재하면, delete
    if(map.get("deletedFileSn") != null) {
        // , 를 기준으로 잘라서 String만 받아와서  [] array 화 시켜 담음
        String[] deletedFileList = map.get("deletedFileSn").toString().split(",");

        for(String deletedFileSn : deletedFileList) {
            fileInfoMap.put("atchFileSn", deletedFileSn);
        }
    }
    return resultMap;
}