jQuery 만으로 파일 업로드하기

안녕하세요 삽질하는 프로그래머 통통만두입니다.

이번에는 프로젝트를 진행하면서 파일 업로드를 구현을 하게 되었습니다.

소스상으로 간단한 방법이 없을까 찾아봤는데 jQuery 를 통해서 정말 간단하게 해결할 수 있었습니다.

source.jsp

<div class="modal fade" id="mdlExcelUpload" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">엑셀 업로드</h4>
      </div>
      <div class="modal-body">
        <form id="frmModal" action="${contextPath}/file/fileUpload.do" method="post" enctype="multipart/form-data">
          <fieldset>
            <div class="row">
              <section class="col col-10">
                <label class="select">
                  <input type="file" id="excelFile" name="excelFile" size="35" style="width: 400px;"></label>
              </section>
            </div>
          </fieldset>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" id="btnExcelUpload" class="btn btn-primary">확인</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">취소</button>
      </div>
    </div>
  </div>
</div>

script

$("#btnExcelUpload").click(function() {
  if( isNull($("#excelFile").val()) ) {
    $("#excelFile").focus();
    alert("파일을 선택하세요.");
    return;
  }

  var formData = new FormData();
  formData.append("excelFile", $("#excelFile")[0].files[0]);
  $.ajax({
    url: "${contextPath}/file/fileUpload.do",
    data: formData,
    processData: false,
    contentType: false,
    type: "POST",
    async: false,
    success: function(data){
      alert("EE");
    }
  });

  $("#mdlExcelUpload").modal("toggle");
})

file.controller.java

@RequestMapping(value="fileUpload.do")
public String fileUpload(HttpServletRequest req, @RequestParam Map<String,Object> paramMap, Model model) throws Exception {
   logger.info(" > paramMap : " + paramMap);

   MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) req;
   CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("excelFile");

   model.addAllAttributes(paramMap);
   return "";
}

정말 간단하네요~

출처 : http://roqkffhwk.tistory.com/67