카테고리 없음

검색, 회원등록

logloglog 2021. 2. 17. 16:01

입력화면에, input이 여기저기 산재해있을때

입력용 폼태그랑 제출용폼태그를 따로

 

넘겨야되는 파라미터들을 따로만든 폼태그로 따로 보내기

버튼누르면 서브밋되게,, 리턴은 false..

 

<form action>

<inpu  type hidden name에는 실제 인풋의 아이디같은 선택자로 밸류뽑아옴>

</form>

 

검색했던거 표시해주려고 가져오는거임. 기존거 유지하려고!

 

어떻게하면 pagemaker안쓰고 cri.page로 쓸수있을까?

>여기서 공유할꺼면 pageCOntext에 심자@@

 

이렇게!

<form id="jobForm">
	<input type="hidden" name="page" value="${cri.page}"/>
	<input type="hidden" name="perPageNum" value="${cri.perPageNum}"/>
	<input type="hidden" name="searchType" value="${cri.searchType}"/>
	<input type="hidden" name="keyword" value="${cri.keyword}"/>
</form>

 

 

이벤트핸들러로만 갈수있음

버튼에 타입도 버튼이므로 절대 서브밋으로 보낼수도없음 ㅋ

 

내가 작성자 kkk검색하면 kkk작성자의 1번페이지가 나옴 거기서 2페이지로 넘어가면

검색조건은 똑같이 넘어가고 2페이지로 가야함

그래서

 

넣은거임

 

 

url은 없으면 안받고말아..폼태그를 객체형태로 만들고 거기서 find를 써도 됨

검색바에 있는 50개씩 이런거랑 키워드는 유지가되니까 거기서가져오면 되는데

페이지번호는 받아오는거임

 

근데 매번 서치바 가져옯필요잇을까?

이건 개발자 판단임

 

<%@page import="com.jquery.command.SearchCriteria"%>
<%@page import="com.jquery.command.PageMaker"%>
<%@page import="com.jquery.dto.MemberVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>

<%
   SearchCriteria cri =((PageMaker)request.getAttribute("pageMaker")).getCri();
   pageContext.setAttribute("cri", cri);
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- Tell the browser to be responsive to screen width -->
<meta
   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
   name="viewport">
<!-- Font Awesome -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

</head>
<body>
       <!-- Main content -->
       <section class="content">
         <div class="card">          
            <div class="card-header with-border">
               <button type="button" class="btn btn-primary"    onclick="OpenWindow('registForm.do','회원등록',800,700);" >회원등록</button>
               <div id="keyword" class="card-tools" style="width:550px;">
              <div class="input-group row">   
                 <!-- sort num -->
                 <select class="form-control col-md-3" name="perPageNum" id="perPageNum" onchange="searchList_go(${cri.page });">
                    <option value="10" >정렬개수</option>
                    <option value="2" ${cri.perPageNum == 2 ? 'selected':''}>2개씩</option>
                    <option value="3" ${cri.perPageNum == 3 ? 'selected':''}>3개씩</option>
                    <option value="5" ${cri.perPageNum == 5 ? 'selected':''}>5개씩</option>
                 </select>
              <!-- search bar -->
                <select class="form-control col-md-3" name="searchType" id="searchType">
                  <option value=""  ${cri.searchType eq '' ? 'selected':''}>검색구분</option>
                  <option value="i"  ${cri.searchType eq 'i' ? 'selected':''}>아이디</option>
                  <option value="p"  ${cri.searchType eq 'p' ? 'selected':''}>전화번호</option>
                  <option value="e"  ${cri.searchType eq 'e' ? 'selected':''}>이메일</option>
               </select>                                        
               <input  class="form-control" type="text" name="keyword" 
               placeholder="검색어를 입력하세요." value="${cri.keyword }"/>
               <span class="input-group-append">
                  <button class="btn btn-primary" type="button" 
                  id="searchBtn" data-card-widget="search" onclick="searchList_go(1);">
                     <i class="fa fa-fw fa-search"></i>
                  </button>
               </span>
               <!-- end : search bar -->
              </div>
             </div>               
            </div>     
          <div class="card-body" style="text-align:center;">
            <div class="row">
                <div class="col-sm-12">   
                <table class="table table-bordered">
                   <tr>
                         <th>아이디</th>
                         <th>패스워드</th>
                         <th>이메일</th>
                         <th>전화번호</th>
                         <th>등록날짜</th> <!-- yyyy-MM-dd  -->
                        </tr>
                       <% List<MemberVO> memberList = (List<MemberVO>)request.getAttribute("memberList");
                          for(int i=0;i<memberList.size();i++){
                            pageContext.setAttribute("member", memberList.get(i));
                       %>
                       
                       <tr>
                          <td>${member.id }</td>
                          <td>${member.pwd }</td>
                          <td>${member.email }</td>
                          <td>${member.phone }</td>
                          <td>${member.regDate }</td>
                       </tr>
                       
                       
                       <%      
                          }
                       %>
                       
                       
                </table>
             </div> <!-- col-sm-12 -->
           </div> <!-- row -->
          </div> <!-- card-body -->
          <div class="card-footer">
             <nav aria-label="member list Navigation">
    <ul class="pagination justify-content-center m-0">
       <li class="page-item">
         <a class="page-link" href="javascript:searchList_go(1);">
         <i class="fas fa-angle-double-left"></i>
         </a>
      </li>
      <li class="page-item">
         <a class="page-link" href="javascript:searchList_go(
         ${pageMaker.prev ? pageMaker.startPage-1 : 1}            
         );"><i class="fas fa-angle-left"></i></a>
      </li>
      
      <% 
         PageMaker pageMaker = (PageMaker)request.getAttribute("pageMaker");
         for(int i=pageMaker.getStartPage();i<pageMaker.getEndPage()+1;i++){
         pageContext.setAttribute("pageNum",i);
         %>
         
         <li class="page-item ${pageMaker.cri.page == pageNum?'active':''}">
            <a class="page-link" href="javascript:searchList_go(${pageNum});" >${pageNum }
            </a>
         </li>
         
      <%            
         } %>
      
                        
      
      <li class="page-item">
         <a class="page-link" href="javascript:searchList_go(
         ${pageMaker.next ? pageMaker.endPage+1 : pageMaker.cri.page}         
         );"><i class="fas fa-angle-right" ></i></a>
      </li>
      <li class="page-item">
         <a class="page-link" href="javascript:searchList_go(
            ${pageMaker.realEndPage} );">
            <i class="fas fa-angle-double-right"></i></a>
      </li>   
    </ul>
 </nav>
          </div> <!-- card-footer -->
          </div> <!-- card  -->
       </section>   


<!-- jQuery -->
<script src="<%=request.getContextPath() %>/resources/bootstrap/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<%=request.getContextPath() %>/resources/bootstrap/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="<%=request.getContextPath() %>/resources/bootstrap/dist/js/adminlte.min.js"></script>
<!-- common.js -->
<script src="<%=request.getContextPath() %>/resources/js/common.js"></script>




<form id="jobForm">
   <input type="hidden" name="page" value="${cri.page}"/>
   <input type="hidden" name="perPageNum" value="${cri.perPageNum}"/>
   <input type="hidden" name="searchType" value="${cri.searchType}"/>
   <input type="hidden" name="keyword" value="${cri.keyword}"/>
</form>




<script>
function searchList_go(page,url){
      
      var jobForm = $('#jobForm');
      jobForm.find("[name='page']").val(page);
      jobForm.find("[name='perPageNum']").val($('select[name="perPageNum"]').val());
      jobForm.find("[name='searchType']").val($('select[name="searchType"]').val());
      jobForm.find("[name='keyword']").val($('div.input-group>input[name="keyword"]').val());
      jobForm.attr("method","post");
      if(url){
         jobForm.attr('action', url)
      }else{
         jobForm.attr('action', "list.do")
      }
      
      jobForm.submit();
   }
</script>

</body>

회원등록

resist.jsp, handler, hanlerproperties, list에 버튼

 

resist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- Tell the browser to be responsive to screen width -->
<meta
   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
   name="viewport">
<!-- Font Awesome -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

</head>

<body>

   <!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" >
  
   <!-- Main content -->
   <section class="content register-page">
      <div class="register-box">
         <div class="login-logo">
             <a href="<%=request.getContextPath()%>/member/registForm.do"><b>회원 등록</b></a>
           </div>
         <!-- form start -->
         <div class="card">            
            <div class="register-card-body">
               <form role="form" class="form-horizontal" action="regist.do" method="post">                  
                  <input type="hidden" name="picture" />
                  <div class="input-group mb-3">
                     <div class="mailbox-attachments clearfix" style="text-align: center;">
                        <div class="mailbox-attachment-icon has-img" id="pictureView" style="border: 1px solid green; height: 200px; width: 140px; margin: 0 auto;"></div>
                        <div class="mailbox-attachment-info">
                           <div class="input-group input-group-sm">
                              <label for="inputFile" class=" btn btn-warning btn-sm btn-flat input-group-addon">파일선택</label>
                              <input id="inputFileName" class="form-control" type="text" name="tempPicture" disabled/>
                              <input id="picture" class="form-control" type="hidden" name="picture" />
                              <span class="input-group-append-sm">                                 
                                 <button type="button" class="btn btn-info btn-sm btn-append" onclick="upload_go();">업로드</button>                                 
                              </span>
                           </div>
                        </div>
                     </div>
                     <br />
                    </div>   
                    <div class="form-group row">
                      <label for="id" class="col-sm-3" style="font-size:0.9em;" >
                         <span style="color:red;font-weight:bold;">*</span>아이디</label>   
                     <div class="col-sm-9 input-group input-group-sm">
                        <input name="id" 
                           onkeyup="this.value=this.value.replace(/[\ㄱ-ㅎㅏ-ㅣ가-힣]/g, &#39;&#39;);"
                        type="text" class="form-control" id="id" placeholder="13글자 영문자,숫자 조합">
                        <span class="input-group-append-sm">   
                           <button type="button" onclick="idCheck_go();"  class="btn btn-info btn-sm btn-append">중복확인</button>
                        </span>                        
                     </div>                        
                  </div>
                  <div class="form-group row">
                     <label for="pwd" class="col-sm-3" style="font-size:0.9em;">
                        <span style="color:red;font-weight:bold;">*</span>패스워드</label>
                     <div class="col-sm-9 input-group-sm">                        
                        <input class="form-control" name="pwd" type="password" class="form-control" id="pwd"
                              placeholder="20글자 영문자,숫자,특수문자 조합" />
                     </div>
                     
                  </div>
                  <div class="form-group row">
                     <label for="name" class="col-sm-3" style="font-size:0.9em;">
                        <span style="color:red;font-weight:bold;">*</span>이 름</label>
                     <div class="col-sm-9 input-group-sm">                        
                        <input class="form-control" name="name" type="text" class="form-control" id="name"
                              placeholder="이름을 입력하세요" />
                     </div>
                     
                  </div>      
                  <div class="form-group row">
                     <label for="authority" class="col-sm-3" style="font-size:0.9em;" >권 한</label>
                     <div class="col-sm-9">
                        <select name="authority" class="form-control" style="font-size:0.9em;">
                           <option value="ROLE_USER">사용자</option>
                           <option value="ROLE_MANAGER">운영자</option>
                           <option value="ROLE_ADMIN">관리자</option>
                        </select>
                     </div>
                  </div>               
                  <div class="form-group row">
                     <label for="email" class="col-sm-3" style="font-size:0.9em;">이메일</label>
                     <div class="col-sm-9 input-group-sm">
                        <input name="email" type="email" class="form-control" id="email"
                              placeholder="example@naver.com">
                     </div>
                  </div>
                  <div class="form-group row">
                     <label for="phone" class="col-sm-3 control-label">전화번호</label>
                     <div class="col-sm-9">   
                        <div class="input-group-sm">
                           <select style="width:75px;" name="phone" id="phone" class="form-control float-left">
                              <option value="">-선택-</option>
                              <option value="010">010</option>
                              <option value="011">011</option>
                              <option value="017">017</option>
                              <option value="018">018</option>
                           </select>                     
                           <label class="float-left" style="padding: 0; text-align: center;">&nbsp;-&nbsp;</label>                              
                           <input style="width:68px;" name="phone" type="text" class="form-control float-left" />
                           <label class="float-left" style="padding: 0; text-align: center;">&nbsp;-</label>
                           <input style="width:68px;" name="phone" type="text" class="form-control float-right" />                  
                        </div>
                     </div>
                  </div>
                  
                  <div class="card-footer">
                     <div class="row">                        
                        <div class="col-sm-6">
                           <button type="button" id="registBtn" class="btn btn-info">가입하기</button>
                         </div>
                         
                         <div class="col-sm-6">
                           <button type="button" id="cancelBtn" onclick="CloseWindow();"
                              class="btn btn-default float-right">&nbsp;&nbsp;&nbsp;취 &nbsp;&nbsp;소&nbsp;&nbsp;&nbsp;</button>
                        </div>
                     
                     </div>
                  </div>
               </form>               
            </div><!-- register-card-body -->
         </div>
      </div>
   </section>      <!-- /.content -->
</div>
<!-- /.content-wrapper -->



<!-- jQuery -->
<script src="<%=request.getContextPath() %>/resources/bootstrap/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<%=request.getContextPath() %>/resources/bootstrap/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="<%=request.getContextPath() %>/resources/bootstrap/dist/js/adminlte.min.js"></script>
<!-- common.js -->
<script src="<%=request.getContextPath() %>/resources/js/common.js"></script>


</body>

 

 

 

사진첨부미리보기, 사진있어야가입, 정규식, 중복확인(rest방식) 할거임

 

무슨사진인지 모르므로 레스트방식임은 분명함

 

resist.jsp으 ㅣ화면상의특징은

타입이 파일인 인풋태그는 모양을 인위저긍로 바꿀수없음

파일선택은 버튼모양이지만 라벨임

라벨에 for라는 속성을 이용

 

라벨의 역할은 for에 해당 아이디를 주게되면 거기에 포커스한 형태로 가게됨 이걸 이용하는거임

실제로 파일을 여기잇지않고 다른데에잇음

 

파일업로드를 할수있는 폼태그르 추가로 하나 만들게되고

파일선택시 이벤트이용해서 인풋태그에 타입이 파일인것이 동작되게하고

파일에 체인지이벤트 걸어서 핸들러에서 선택한 파일 이 미리보기가 되도록

 

 

1. 업로드전용폼태그만들기

2. 인풋태그의 파일에 체인지이벤트걸기

3. 체인지이벤트의 핸들러안에서 jpg인지 이미지형식인지 확인, 이미지라면 미리보기로 보이게

 

멀티파트폼데이터 잊지말기
업로드가 되면 1로바뀔거임

근데 파일이 1 업로드에서 체인지된다면 (즉 사진 1로 업로드해다가 다시 파일선택해서 똑같은 파일을 클릭하면 체인지이벤트가 발생하지않ㄹ는데 다른거를 선택하면 그떄!)

checkuploadvalue를 다시 0으로해야함 왜? 업로드는 업로드버튼을 눌렀을떄되는거기떄문임 라벨은 미리보기만 보여주는거임


 

파일네임넣어주기

 

 

 


사진미리보기 백그라운드에 넣기

업로드는 업로드버튼누를때

파일은폼태그에있고

임지ㅣ를 저장시켜주는 핸들러에게 전송시키자

순수 form태그를 가져오려면 [0]만 가져와야함
저기 아이디가 picture인 부분은
회;원등록시 파일이름 ㅅ서브밋해야하므로.. 여기임

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- Tell the browser to be responsive to screen width -->
<meta
   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
   name="viewport">
<!-- Font Awesome -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

</head>

<body>

   <!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" >
  
   <!-- Main content -->
   <section class="content register-page">
      <div class="register-box">
         <div class="login-logo">
             <a href="<%=request.getContextPath()%>/member/registForm.do"><b>회원 등록</b></a>
           </div>
         <!-- form start -->
         <div class="card">            
            <div class="register-card-body">
               <form role="form" class="form-horizontal" action="regist.do" method="post">                  
                  <input type="hidden" name="picture" />
                  <div class="input-group mb-3">
                     <div class="mailbox-attachments clearfix" style="text-align: center;">
                        <div class="mailbox-attachment-icon has-img" id="pictureView" style="border: 1px solid green; height: 200px; width: 140px; margin: 0 auto;"></div>
                        <div class="mailbox-attachment-info">
                           <div class="input-group input-group-sm">
                              <label for="inputFile" class=" btn btn-warning btn-sm btn-flat input-group-addon">파일선택</label>
                              <input id="inputFileName" class="form-control" type="text" name="tempPicture" disabled/>
                              <input id="picture" class="form-control" type="hidden" name="picture" />
                              <span class="input-group-append-sm">                                 
                                 <button type="button" class="btn btn-info btn-sm btn-append" onclick="upload_go();">업로드</button>                                 
                              </span>
                           </div>
                        </div>
                     </div>
                     <br />
                    </div>   
                    <div class="form-group row">
                      <label for="id" class="col-sm-3" style="font-size:0.9em;" >
                         <span style="color:red;font-weight:bold;">*</span>아이디</label>   
                     <div class="col-sm-9 input-group input-group-sm">
                        <input name="id" 
                           onkeyup="this.value=this.value.replace(/[\ㄱ-ㅎㅏ-ㅣ가-힣]/g, &#39;&#39;);"
                        type="text" class="form-control" id="id" placeholder="13글자 영문자,숫자 조합">
                        <span class="input-group-append-sm">   
                           <button type="button" onclick="idCheck_go();"  class="btn btn-info btn-sm btn-append">중복확인</button>
                        </span>                        
                     </div>                        
                  </div>
                  <div class="form-group row">
                     <label for="pwd" class="col-sm-3" style="font-size:0.9em;">
                        <span style="color:red;font-weight:bold;">*</span>패스워드</label>
                     <div class="col-sm-9 input-group-sm">                        
                        <input class="form-control" name="pwd" type="password" class="form-control" id="pwd"
                              placeholder="20글자 영문자,숫자,특수문자 조합" />
                     </div>
                     
                  </div>
                  <div class="form-group row">
                     <label for="name" class="col-sm-3" style="font-size:0.9em;">
                        <span style="color:red;font-weight:bold;">*</span>이 름</label>
                     <div class="col-sm-9 input-group-sm">                        
                        <input class="form-control" name="name" type="text" class="form-control" id="name"
                              placeholder="이름을 입력하세요" />
                     </div>
                     
                  </div>      
                  <div class="form-group row">
                     <label for="authority" class="col-sm-3" style="font-size:0.9em;" >권 한</label>
                     <div class="col-sm-9">
                        <select name="authority" class="form-control" style="font-size:0.9em;">
                           <option value="ROLE_USER">사용자</option>
                           <option value="ROLE_MANAGER">운영자</option>
                           <option value="ROLE_ADMIN">관리자</option>
                        </select>
                     </div>
                  </div>               
                  <div class="form-group row">
                     <label for="email" class="col-sm-3" style="font-size:0.9em;">이메일</label>
                     <div class="col-sm-9 input-group-sm">
                        <input name="email" type="email" class="form-control" id="email"
                              placeholder="example@naver.com">
                     </div>
                  </div>
                  <div class="form-group row">
                     <label for="phone" class="col-sm-3 control-label">전화번호</label>
                     <div class="col-sm-9">   
                        <div class="input-group-sm">
                           <select style="width:75px;" name="phone" id="phone" class="form-control float-left">
                              <option value="">-선택-</option>
                              <option value="010">010</option>
                              <option value="011">011</option>
                              <option value="017">017</option>
                              <option value="018">018</option>
                           </select>                     
                           <label class="float-left" style="padding: 0; text-align: center;">&nbsp;-&nbsp;</label>                              
                           <input style="width:68px;" name="phone" type="text" class="form-control float-left" />
                           <label class="float-left" style="padding: 0; text-align: center;">&nbsp;-</label>
                           <input style="width:68px;" name="phone" type="text" class="form-control float-right" />                  
                        </div>
                     </div>
                  </div>
                  
                  <div class="card-footer">
                     <div class="row">                        
                        <div class="col-sm-6">
                           <button type="button" id="registBtn" class="btn btn-info">가입하기</button>
                         </div>
                         
                         <div class="col-sm-6">
                           <button type="button" id="cancelBtn" onclick="CloseWindow();"
                              class="btn btn-default float-right">&nbsp;&nbsp;&nbsp;취 &nbsp;&nbsp;소&nbsp;&nbsp;&nbsp;</button>
                        </div>
                     
                     </div>
                  </div>
               </form>               
            </div><!-- register-card-body -->
         </div>
      </div>
   </section>      <!-- /.content -->
</div>
<!-- /.content-wrapper -->



<!-- jQuery -->
<script src="<%=request.getContextPath() %>/resources/bootstrap/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<%=request.getContextPath() %>/resources/bootstrap/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="<%=request.getContextPath() %>/resources/bootstrap/dist/js/adminlte.min.js"></script>
<!-- common.js -->
<script src="<%=request.getContextPath() %>/resources/js/common.js"></script>


<form role="imageForm"  action="upload/picture.do" method="post" enctype="multipart/form-data">
	<input id="inputFile" name="pictureFile" type="file" class="form-control"
			style="display:none;">
	<input id="oldFile" type="hidden" name="oldPicture" value=""/>
	<input type="hidden" name="chechUpload" value="0" />
</form>

<script>
$('input#inputFile').on('change',function(event){
	//업로드 확인변수 초기화
	$('input[name="checkUpload"]').val(0);
	
	var fileFormat=
		this.value.substr(this.value.lastIndexOf(".")+1).toUpperCase();
	
	// 이미지확장자.jpg 확인
	if(!(fileFormat=="JPG"|| fileFormat=="JPEG")){
		alert("이미지는 jpg/jpeg 형식만 가능합니다.");
		$(this).val("");
		return;
	}
	//이미지 파일 용량 체크
	if(this.files[0].size>1024*1024*1){
		alert("사진 용량은 1MB 이하만 가능합니디.");
		return;
	};
	document.getElementById('inputFileName').value=this.files[0].name;
	
	if(this.files && this.files[0]){
		var reader = new FileReader();
		reader.onload = function(e){
			$('div#pictureView')
			.css({
				'background-image':'url('+e.target.result+')',
				'background-position':'center',
				'background-size':'cover',
				'background-repeat':'no-repeat'
			});
		}
		reader.readAsDataURL(this.files[0]);
	}
});

function upload_go(){
	//1. 업로드시 사진이미지가 선택되어있는지 확인(유효성)
	if($('input[name="pictureFile"]').val()==""){
		alert("사진을 선택하세요");
		$('input[name="pictureFile"]').click();
		return;
	};
	
	//2 ajax시 해당 폼태그가져와야암 (시리얼라이즈안됨. 시리얼라이즈안됨.파라미터스트링으로만들ㅇ수있는애가 아니므로 폼태그자체를 날려야함. 폼데이터로보내야함)
	var form = new FormData($('form[role="imageForm"]')[0]);
	
	//순수하게  form데이터를 보내야함
	//잘 넘어가면 저장된 파일명을 줄거임
	//ㅇ근데 ㅇ업로드후 변경될경우 삭제될 파일명이 되기도하므로 혹시나 파일변경을 대비하기위해 oldFile에 넣어줌
	
	$.ajax({
		url:"<%=request.getContextPath()%>/member/picture.do",
		data:form,
		type:'post',
		processData:false,
		contentType:false,
		success:function(data){
			// 업로드확인변수세팅
			$('input[name="checkUpload"]').val(1);
			
			//저장될파일명저장
			 $('input#oldFile').val(data);//변경시 삭제될 파일명
			 $('form[role="form"] input[name="picture"]').val(data);
			 alert("사진이 업로드 되었습니다.");
		},
		error:function(error){
			alert("현재 사진 업로드가 불가합니다 \n  관리자에게 연락바랍니다.");
		}
	})
}

</script>
</body>
</html>