ファイルのアップロード時に複数のパラメータを送信

10620 ワード
Java JavaScript TIL Spring テキストリンク
ファイルをアップロードしてサーバに転送するときに、他の値をサーバに転送する方法を理解します~!
(Javascript -> Java)

ソースコード


HTML


ファイルをアップロードするボタンを作成します.
formのenctypeとinputtypeを次のように指定します.
<form id="frmAttachedFiles" class="form-horizontal" enctype="multipart/form-data"">
	<div class="btn btn-primary btn-file">
		<i class="fa fa-paperclip"></i> Upload테스트
		<input type="file" id="upload" name="upload">
	</div>
</form>

Javascript


ファイルをアップロードすると、fnUpload()が実行されます.
FormDataを生成する場合は、HTMLで指定したフォームIDを入力してファイルを受信します.
💡 form.appendを使用して必要なパラメータを追加します.
ajaxを使用してファイルを転送する場合は、次のデータ型、processData、contentType、enctTypeを指定する必要があります.
// upload 했을 때
$("#upload").on("change", function() {
	fnUpload();
});

function fnUpload() {
	let form = new FormData($("#frmAttachedFiles")[0]);
	form.append("name", "테스트");
	
    let apiUrl = "/uploadTest.do";
	$.ajax({
		url : apiUrl,
		type : "POST",
		data : form,
		dataType: "json",
		processData: false,
		contentType: false,
		enctype : 'multipart/form-data',
		success: function(result) {
			Alert("성공");
		}
	});
}

Java -> Controller


コントローラから要求があります.
fileはMultipartHttpServletRequestにインポートでき、パラメータはrequest.getFile()フォーマットにインポートできます.
@PostMapping(value="/uploadTest.do")
public ResponseEntity<RestResultVO> uploadTest(MultipartHttpServletRequest request, HttpServletResponse response) throws Exception
{
	MultipartFile file = null;
	Iterator<String> iterator = request.getFileNames();
	if (iterator.hasNext()) {
		file = request.getFile(iterator.next());
	}    
    String name = request.getParameter("name");
    
    ...
}
J 2 EEページング、PageUtil
[プログラマレベル3]ネットワーク