복군의 뒷주머니

jsp에서 파일 가져오기

<input id="browse" type="file" onchange="previewFiles()" multiple />
<div id="preview"></div>

onchange에서 img에 셋팅해주고 preview에 추가해주기

function previewFiles() {
  var preview = document.querySelector("#preview");
  var files = document.querySelector("input[type=file]").files;

  function readAndPreview(file) {
    // `file.name` 형태의 확장자 규칙에 주의하세요
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
      var reader = new FileReader();

      reader.addEventListener(
        "load",
        function () {
          var image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = this.result;
          preview.appendChild(image);
        },
        false,
      );

      reader.readAsDataURL(file);
    }
  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }
}

참고 : https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsDataURL

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;
}