ajax multipart/form-data file upload 예제

html

<form method="POST" enctype="multipart/form-data" id="excelForm">
    <input type="file" name="excelFile"/>
    <input type="hidden" name="userId" value="testUser"/>
</form>

<div class="form-group ml10">
    <button type="button" class="btn btn-primary btn-sm" onclick="excelTest();">excelUploadTest</button>
</div>

function excelTest() {
    var form = $('#excelForm')[0];

    // FormData 객체 생성
    var formData = new FormData(form);

    // 코드로 동적으로 데이터 추가 가능.
//                formData.append("userId", "testUser!");

    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "/api/playlists/14/2017-07-21/mapper/excel",
        data: formData,
        processData: false,
        contentType: false,
        cache: false,
        timeout: 600000,
        success: function (data) {
            console.log("SUCCESS : ", data);
        },
        error: function (e) {
            console.log("ERROR : ", e);
        }
    });
}

Controller

@RequestMapping(
      value = "/{playlistSeqno}/{vwDate}/mediaMappings/excel"
      , method= RequestMethod.POST
      , consumes ={"multipart/form-data"}
)
public Object playlistDailyMappingExcelImportProc(
      PlaylistDailyMappingVO vo
      , @RequestParam(value = "excelFile") MultipartFile excelFile
      , @RequestParam(value = "userId", required = false) String userId
      , @PathVariable Integer playlistSeqno
      , @PathVariable String vwDate)
{
   LOGGER.debug("vo :::::: "+vo);
   LOGGER.debug("userId :::::: "+userId);
   LOGGER.debug("filename :::::: "+excelFile.getOriginalFilename());

   List<PlaylistDailyMappingVO> vos = mediaService.getExcelData(vo);
   mediaService.insertMediaPlaylistDailyMapping(vos);
   return viewPlaylistWithSeqno(playlistSeqno, vwDate);
}