processData : false
url에 쿼리스트링으로 data 보이게 하지 않기
index.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#addbtn').click(function(){
$('#imglist').toggle();
});
$('#upload_btn').click(function(){
<!--
let title = $('#title').val();
let writer = $('#writer').val();
let pwd = $('#pwd').val();
let file = $('#file').val();
let data = {"title":title, "writer":writer, "pwd":pwd, "file":file};
-->
let form=$('#upload_form')[0];
let formData = new FormData(form);
alert(formData);
$.ajax({
type: 'POST',
url: '${pageContext.request.contextPath}/WriterController',
data: formData,
processData : false, <!-- processData 뭔지 알아내기 -->
contentType : false,
success: function(result){
let obj = $.parseJSON(result);
makeTb1(obj);
}
});
$('#imglist').css('display', 'none');
});
});
</script>
</head>
<body>
<h3>이미지 게시판</h3>
<button type="button" id="addbtn">이미지 올리기</button>
<div id="imglist" style="display:none;">
<form id = "upload_form" method="post" enctype="multipart/form-data">
<table border="1px">
<tr>
<td>제목</td><td><input type="text" id="title"></td>
</tr><tr>
<td>게시자</td><td><input type="text" id="writer"></td>
</tr><tr>
<td>글비밀번호</td><td><input type="password" id="pwd"></td>
</tr><tr>
<td>이미지</td><td><input type="file" id="file"></td>
</tr><tr>
<td colspan="2"><button type="button" id="upload_btn">올리기</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>
WriteController
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
Service service = new ServiceImpl();
int num = service.makeNum();
Img p = new img();
p.setNum(num);
int maSize = 1024*1024*10;
MultipartRequest multi = null;
String uploadPath = "";
try {
mulit = new MultipartRequest(request,uploadPath,maxSize,"utf-8",new DefaultFileRenamePolicy);
p.setTitle(request.getParameter("title"));
p.setWriter(request.getParameter("writer"));
p.setPwd(request.getParameter("pwd"));
Enumeration files = multi.getFileNames();
while(files.hasMoreElements()) {
//form태그에서 <input type="file" name="지정한 이름" 가져오기
String file1 = (String)files.nextElement();
//그에 해당하는 실제 파일 이름 가져옴
img = multi.getOriginalFileName(file1);
//파일 업로드
File file = multi.getFile(file1);
}
} catch(Exception e) {
e.printStackTrace();
}
p.setPath("/img/"+img);
service.addImg(p);
Img i = service.getImg(num);
request.setAttribute("i", i);
RequestDispatcher rd = request.getRequestDispatcher("/imgBoard/addImg.jsp");
rd.forward(request, response);
}
728x90
'국비 학원 가서 개발새발' 카테고리의 다른 글
| 국비학원 47일차) ajax, Jquery (0) | 2022.12.06 |
|---|---|
| 국비학원 46일차) jquery, ajax (1) | 2022.12.05 |
| 국비학원 33일차) 혼자 개발하기 (0) | 2022.11.16 |
| 국비학원 30일차) 스프링 혼자 공부 (0) | 2022.11.11 |
| 국비학원 29일차) mvc (0) | 2022.11.09 |