ajax로 업로드 시 file객체 처리

파일업로드 시 서버호출을 AJAX로 할 때 파일업로드가 실패한다.

이유는 파일객체를 서버로 제대로 전달하지 못해서 인데, FormData를 쓰면 제대로 파일객체를 전달할 수 있다.

// 전송하려는 form의 ID가 frm일 때

var form = new FormData(document.getElementById('frm')); 
              
$.ajax({dataType : 'json',
    url : '/test.jsp',
    data : form,
    type : 'text',
    processData: false,
    contentType:false,
    type: 'post',
    success : function(data) {
     
    },
    error : function(data) {
     
    }
});

 

FormData.append

Appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.

FormData.delete

Deletes a key/value pair from a FormData object.

FormData.get

Returns the first value associated with a given key from within a FormData object.

FormData.getAll

Returns an array of all the values associated with a given key from within a FormData.

FormData.has

Returns a boolean stating whether a FormData object contains a certain key/value pair.

FormData.set

Sets a new value for an existing key inside a FormData object, or adds the key/value if it does not already exist.

참조 : https://developer.mozilla.org/en-US/docs/Web/API/FormData