<body>
<input class="multi-files" type="file" name="uploadFiles" multiple="multiple">
<button class="uploadBtn" >upload</button>
<script>
$('.uploadBtn').click(function(){
var formData = new FormData;
var inputFile = $('.multi-files');
var files = inputFile[0].files;
for(var i = 0; i < files.length; i++){
console.log(files[i]);
formData.append("uploadFiles", files[i]);
}
//실제 업로드 부분
$.ajax({
📌uri: '/uploadAjax', //컨트롤러에서 PostMapping하는 메서드의 url
📌processData: false, //
📌contentType: false, //multipart/form-data 타입 사용하기 위함
data: formData,
type: 'POST',
dataType: 'json',
success: function(result){
console.log(result);
//나중에 화면 처리
},
error: function(jqXHR, textStatus, errorThrown){
console.log(textStatus);
}
})
});
</script>
</body>
👉jQuery 부분
- formData.append(name, value); 이용하여 필드의 이름과 값을 추가한다.
- (key, value) 개념
- 이름(key)이 기존에 있다면 기존 값(value) 끝에 새로운 값(value)을 추가한다.
참고자료
👉ajax 옵션 설정
- processData : false로 선언 시 formData를 string으로 변환하지 않음
- contentType : false 로 선언 시 content-type 헤더가 multipart/form-data로 전송되게 함
참고자료
차근차근