JavaScript 활용팁
HOME > WEB > JavaScript 활용팁
2018.09.23 / 16:08

Form 없이 파일 업로드하기

hangawee
추천 수 168

Form 태그를 사용하지 않고 파일 업로드를 사용하려면?

최근에 개발을 하면서 찾은 내용을 정리한 포스팅입니다.

form을 사용하지 않고 input 태그에 받아들인 파일을 ajax를 통해 서버로 보내야 하는 방법이 필요했습니다.
방법은 다양하지만 그 중 하나로 아래의 예를 첨부합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function sendData() {
	var data = new FormData();
	data.append("accountIdx", $('#hAccountIdx').val())
	data.append("profileImgFile", $('#profileImgInput').prop('files')[0])

	$.ajax({
        url: "URL",
        type: "POST",
        dataType: 'json',
        data: data,
        contentType: false,
        processData: false,
        cache: false,
        timeout:5000 //5 second timeout
    }).done(function(jqXHR, textStatus){ 
		location.reload(true);
    }).fail(function(jqXHR, textStatus){
        showSAlert('서버 에러', '서버에서 문제가 발생하였습니다.', 'error')
        console.log("jqXHR = " + jqXHR);
        console.log("textStatus = " + textStatus);
    });
}

참고 StackOverFlow