복군의 뒷주머니

jsp 화면에 file 및 form 적용

<form id="fileForm" method="post" enctype="multipart/form-data">
    <input type="file" capture="camera" id="testfile" width="100px" height="100px" multiple="multiple"/>
    <img id="testimg" width="100px" height="100px"/>
</form>
<button type="button" id="btnUpload">/></button>

script에서 업로드 동작을 위한 버튼 이벤트 및 전송

$("#btnUpload").click(function(){
    var formData = new FormData();
    var inputFile = $("input[id='testfile']");
    var files = inputFile[0].files; 
    for(var i =0;i<files.length;i++){
        formData.append("uploadFiles", files[i]);
    }

    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',	// 필수
        url: '/file/fileUpload',
        data: formData,
        contentType: false, // 필수 : x-www-form-urlencoded로 파싱되는 것을 방지
        processData: false,  // 필수: contentType을 false로 줬을 때 QueryString 자동 설정됨. 해제
        success: function (message) {
            console.log('message = ', message)
        }
    });
});

controller에서 전송된 데이터 받기

@RequestMapping(value = "/fileUpload", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> fileUpload(
        MultipartHttpServletRequest request,
        HttpServletResponse response) throws Exception {
    Map<String, Object> result = new HashMap<>();

    try{
        List<MultipartFile> fileList = request.getFiles("uploadFiles");
        System.out.println("fileList = " + fileList.size());
        for (int i =0; i<fileList.size(); i++) {
            MultipartFile mf = fileList.get(i);
            String originFileName = mf.getOriginalFilename(); // 원본 파일 명
            System.out.println("originFileName = " + originFileName);

            String filePath = "C:/Users/bok/Downloads/myUpload/test";
            mf.transferTo(new File(filePath+i+".jpg")); 
       }
            result.put("message", true);	
    }catch(Exception e){
        System.out.println(e);
        result.put("message", false);
    }

    return result;
}