mobile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 모바일 태그 -->
<meta name="viewport" content="width=device-width, initial-sacle=1">
<title>모바일 시스템 예제</title>
</head>
<body>
<!-- 첨부파일 있으니까 post!! enctype!! -->
<form id="frm" method="post" action="./mobileok.do" enctype="multi-part/form-data">
<!-- 보안 관련 사항을 체크하는 형태 -->
<input type="hidden" name="security" value="m">
<p>모바일 전용 상품 리뷰</p>
고객명 : <input type="text" name="mname"><br>
상품명 : <input type="text" name="pname"><br>
별점 : <select name="star">
<option value="1">1점</option>
<option value="3">3점</option>
<option value="5">5점</option>
</select><br>
리뷰 이미지 : <input type="file" name="mfile" accept="image/*" capture="camera"><br>
<!-- <textarea></textarea> 여기 사이에 값, 엔터, 주석 넣으면 값이 들어가버림 주의 -->
리뷰 내용 : <textarea name="mtext" row="2" cols="100" style="width:100%;"></textarea>
<!-- ontouch : 모바일 전용 버튼 속성 -->
<input type="button" value="리뷰등록" id="btn" ontouch="reviews()"><br>
</form>
</body>
<script src="./mobile.js?v=1"></script>
</html>
- file의 모바일전용 디바이스 I/O 형태
- accept="image/*" capture="camera" => 실시간 사진 촬영 후 전송
- accept="video/*" capture="camcorder" => 실시간 동영상 촬영 후 전송
- accept="audio/*" capture="microphone" => 실시간 음성 녹음 후 전송
- 안쓰면 고르는거 나옴
- ontouch : 모바일 전용 버튼 속성
- js 이벤트 핸들링 함수
- onclick, onsubmit, onchange, onkeypress, onkeyup, onkeydown
- ECMAScript (es) 이벤트 핸들링 함수
- touchstart, touchend. touchmove, touchcancel, click, change, submit, keypress, keyup, keydown
- addEventListener 핸들링
- 버튼에 id만 쓰고 id를 이용해서 es에서 핸들링
- 참고로 버튼엔 name이 없다! 못씀!
mobile.js
document.getElementById("btn").addEventListener("touchstart",function(){
reviews();
});
var reviews = function(){
if(frm.mname.value==""){
alert("고객명을 입력하세요");
frm.mname.focus();
}else if(frm.pname.value==""){
alert("상품명을 입력하세요");
frm.pname.focus();
}else if(frm.mtext.value==""){
alert("리뷰 내용을 입력하세요");
frm.mtext.focus();
}else{
frm.submit();
}
}
mobileok.java
package admin;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
//front가 enctype설정시 무조건 셋팅해야만 정상적으로 페이지가 활성화됨
@MultipartConfig(
fileSizeThreshold = 1024*1024*10, //모바일은 고화질일수있어서 10메가로 낭낭하게 잡아줌
maxFileSize = 1024*1024*50,
maxRequestSize = 1024*1024*100
)
public class mobileok extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
//언어셋은 외부클래스 ㄴㄴ 여기서 하기
req.setCharacterEncoding("utf-8");
res.setContentType("text/html;charset=utf-8");
String se = req.getParameter("security"); //html의 input hidden
System.out.println(se);
if(!se.equals("m")) { //hidden의 값이 다를 경우
PrintWriter pw = res.getWriter();
//언어셋 안해서 그냥 영어씀
pw.write("<script>"
+ "alert('Error!!');"
+ "history.go(-1);"
+ "</script>");
}else { //hidden이 맞을 경우
try {
new reviews(req,res); //데이터를 핸들링함
}catch (Exception e) {
System.out.println(e);
}
}
}
}
//외부 클래스 사용
class reviews{ //외부 클래스 사용시 한글 깨짐 처리는 메인 doPost, doGet에서 처리함
PrintWriter pw = null;
public reviews(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException{
this.pw = res.getWriter();
String mname = req.getParameter("mname"); //고객명
String pname = req.getParameter("pname"); //상품명
String star = req.getParameter("star"); //별점
String mtext = req.getParameter("mtext"); //리뷰 내용
Part p = req.getPart("mfile"); //리뷰 이미지
String filename = p.getSubmittedFileName(); //리뷰 이미지의 이름
/*
//디렉토리가 없을 경우
String ori = req.getServletContext().getRealPath("/review2/");
File f = new File(ori);
f.mkdir();
*/
if(filename != "") { //이미지가 첨부되었을 경우
String url = req.getServletContext().getRealPath("/review/");
p.write(url + filename);
}
//historygo-1 쓰면 전에 작성한게 남아있음
//location.href 전에 작성한거 초기화
pw.write("<script>"
+ "alert('정상적으로 리뷰가 등록되었습니다.');"
+ "location.href='./mobile.html'"
+ "</script>");
System.out.println(mname);
}
}