파일 업로드시 다중 파라미터 전송하기
파일을 업로드해 서버로 넘길 때 다른 값들도 함께 넘겨주는 방법을 알아보자~!
(Javascript -> Java)
소스 코드
HTML
파일을 업로드하기 위한 버튼을 만들어 준다.
form의 enctype과 input type을 다음과 같이 지정해줘야 한다.
<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에서 지정한 form id를 입력해 파일을 받아온다.
💡 form.append
를 사용해 필요한 파라미터들을 추가해준다.
ajax로 파일 전송시 dataType, processData, contentType, enctype을 다음과 같이 지정해줘야 한다.
// 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
❗ Controller에서 MultipartHttpServletRequest
로 요청을 받아온다.
file은 request.getFile()
, 파라미터들은 request.getParameter()
형식으로 가져올 수 있다.
@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");
...
}
Author And Source
이 문제에 관하여(파일 업로드시 다중 파라미터 전송하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minwest/파일-업로드시-다중-파라미터-전송하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)