파일업로드)FormData생성
<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로 전송되게 함
Author And Source
이 문제에 관하여(파일업로드)FormData생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@invigorating92/파일업로드-FormData생성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
