[Spring] Spring Ajax를 이용한 file upload

spring Ajax를 이용한 file upload

기본적으로 Spring MVC를 이용하는 경우, multipart encrypt를 이용해서 form submit으로 file을 upload하는 것이 일반적입니다. 

한번 javascript만을 이용한 file upload를 해보도록 하겠습니다.

먼저, MultipartResolver를 사용하기 위해서 apache common fileupload를 추가해야지 됩니다.

compile 'commons-fileupload:commons-fileupload:1.3.1'

Spring Configuration에 MultipartResolver를 추가합니다.

    @Bean(name = "multipartResolver")
    public MultipartResolver multipartResolver() {
        return new CommonsMultipartResolver();
    }

그리고, 간단한 fileupload html을 꾸밉니다.

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" id="fileId" name="file-data"/>
</form>
<button id="btn-upload">file upload</button>

그리고, 이에 대한 controller code는 다음과 같습니다.

    @RequestMapping(value = "/file/upload", method = RequestMethod.POST)
    @ResponseBody
    public Object uploadFile(MultipartHttpServletRequest request) {
        Iterator<String> itr =  request.getFileNames();
        if(itr.hasNext()) {
            MultipartFile mpf = request.getFile(itr.next());
            System.out.println(mpf.getOriginalFilename() +" uploaded!");
            try {
                //just temporary save file info into ufile
                System.out.println("file length : " + mpf.getBytes().length);
                System.out.println("file name : " + mpf.getOriginalFilename());
            } catch (IOException e) {
                System.out.println(e.getMessage());
                e.printStackTrace();
            }
            return true;
        } else {
            return false;
        }
    }

일단, 간단히 파일을 실제적으로 저장은 시키지 않았습니다. byte data를 얻어냈기 때문에, 

byte data만 저장하면 되어서 일단 위의 코드에서는 제거 되어있습니다.

이제 ajax로 file을 올리기 위해서 button에 click event를 binding시켜줍니다.

  $('#btn-upload').on('click', function () {
    console.log('btn-upload');
    var form = new FormData(document.getElementById('uploadForm'));
    $.ajax({
      url: "upload",
      data: form,
      dataType: 'text',
      processData: false,
      contentType: false,
      type: 'POST',
      success: function (response) {
        console.log('success');
        console.log(response);
      },
      error: function (jqXHR) {
        console.log('error');
      }
    });
  });

ajax로 파일이 정상적으로 upload 되는 것을 확인해볼 수 있습니다.

file length : 65893871
file name : 어떤 과학의 초전자포 08.zip
어떤 과학의 초전자포 08.zip uploaded!

출처 : http://netframework.tistory.com/entry/Spring-MVC%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-Ajax-File-upload