Ajax 실행결과와 상관없이 404에러가 뜨는 문제 해결

위 ajax를 통한 파일업로드 시 결과를 확인했을 때 파일업로드는 정상적으로 이루어졌지만 알 수 없는 이유로 404에러가 발생하면서 ajax 실행 후 에러가 나타난다. 잠시 삽질한 결과 ajax가 실행된 후에는 JSON 또는 XML과 같은 타입으로 어떤 결과를 리턴해야 하지만 void와 같이 아무런 리턴값을 서버로부터 받지 못하는 경우에 발생하는 에러라는 것을 확신했다.

 

Spring으로 테스트 중이므로 먼저 Controller가 @RestController로 작성되었는지 확인하고 그렇지 않다면 @ResponseBody 어노테이션을 메소드에 붙여 JSON 또는 XML 타입으로 알아서 객체로 리턴하도록 한다.

 

 

[ fileUpload.jsp ]

<div>
    <input type="file" name="uploadFile" multiple>
</div>
<button id="uploadBtn">파일업로드</button>

<script>
    $(document).ready(function(){

    $("#uploadBtn").on("click", function(e){
        var formData = new FormData();
        var inputFile = $("input[name='uploadFile']");
        var files = inputFile[0].files;

        $.ajax({
            url: '/uploadFileWithAjax',
            processData: false,
            contentType: false,
            data: formData,
            type: 'POST',
            success: function(result){
                console.log("업로드 성공!!");
            }
        });
    });
});
</script>

 

[ FileUploadController.java ]

@PostMapping("/uploadFileWithAjax")
@ResponseBody
public void uploadAjaxPost(MultipartFile[] uploadFile) {

    String uploadfolder = "/Users/davide/upload/tmp";

    for(MultipartFile multipartFile : uploadFile) {

        String uploadFileName = multipartFile.getOriginalFilename();

        //remove path for IE
        uploadFileName = uploadFileName.substring(uploadFileName.lastIndexOf("\\") + 1);

        File saveFile = new File(uploadfolder, uploadFileName);

        try {
            multipartFile.transferTo(saveFile);
        } catch(Exception e) {
            log.error(e.getMessage());
        }
    }
}