[jQuery] 비동기 파일 전송

Published: 2014-02-17 by 놀이터흙이제맛

Categories:
jquery 13

response example

참고 문서

FormData | MDN

브라우저 호환

IE9 이하 사용 불가

쫑알쫑알.

<body>
    <form id="submitForm" enctype="multipart/form-data">
        <input name="attachFile" id="attachFile" type="file">
        <button type="button" id="submitBtn">upload</button>
    </form>
</body>

<script>
  $(document).ready(function() {
    $('#submitBtn').click(function() {
      var data = new FormData();
      $.each($('#attachFile')[0].files, function(i, file) {
        data.append('file-' + i, file);
      });

      $.ajax({
        url: '/upload.action',
        type: "post",
        dataType: "text",
        data: data,
        // cache: false,
        processData: false,
        contentType: false,
        success: function(data, textStatus, jqXHR) {
          alert(data);
        }, error: function(jqXHR, textStatus, errorThrown) {}
      });
    });
  });
</script>

첨부된 파일을 multipart/form-data 형식으로 처리하기 위해 FormData 객체를 이용했다. FormData는 객체는 append(key, value) 메서드 하나만 있는 객체로 XMLHttpRequest를 통해 파일을 전송할 수 있게 한다.

response example

@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public String upload(MultipartHttpServletRequest req,
  HttpServletResponse res) {

  Iterator<String> itr = req.getFileNames();
  MultipartFile mpf = req.getFile(itr.next());
  String originFileName = mpf.getOriginalFilename();

  // ... 생략

  return "success";
}