<h2>8. Ajax를 이용한 파일업로드</h2>
<input type="file" id="upfile" multiple>
<button onclick="sendFile();">파일전송</button>
html 페이지
● script코드 작성하기
<script>
function sendFile() {
// 파일 전송시 FormData객체를 생성해서 FormData내부에 파일을 넣어준 후 요청을 보내야 한다.
let form = new FormData();
$.each($("#upfile")[0].files, function(i, file){
console.log(i, file);
form.append("upfile" + i, file);
});
$.ajax({
url : "fileUpload.do",
data : form,
type : "post",
processData : false,
contentType : false,
success : (data) => {
alert("업로드 성공");
$("#upfile").val("");
}
});
};
</script>
● fileUpload.do serlvet 코드 생성하기
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String filePath = request.getServletContext().getRealPath("/upload/");
MultipartRequest multiRequest = new MultipartRequest(request, filePath, 1024 * 1024 * 10, "UTF-8", new MyFileRenamePolicy());
Enumeration e = multiRequest.getFileNames(); // 업로드된 파일의 key값이 담겨 있다.
while(e.hasMoreElements()) {
String key = (String)e.nextElement();
System.out.println("파일의 원본 이름 : " + multiRequest.getOriginalFileName(key));
System.out.println("파일의 수정된이름 : " + multiRequest.getFilesystemName(key));
}
}
