ファイルアップロード)FormDataの作成
8313 ワード
<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セクション
👉ajaxオプションの設定
参考資料
Reference
この問題について(ファイルアップロード)FormDataの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@invigorating92/파일업로드-FormData생성テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol