15장 게시물 입력폼 만들기

이번 장에서는 게시물을 입력하기 위한 폼을 만들어 보도록 하겠습니다.

 

작업 파일명 : /WebContent/board/register.jsp

 

먼처 처리 결과에 대한 간단한 영상을 보시기 바랍니다.

 

 

파일 업로드 과정

 

게시물 저장및 파일 업로드에 대한 전체적인 프로세스의 흐름은 아래의 그림과 같습니다.

 

 

차근 차근 만들어 봅시다.

 

검색 페이지(select.jsp)에서 '입력' 버튼을 클릭하면 board.js에 있는 이벤트 처리 부분에서 './board/register.jsp' 파일이 inc 파라미터 변수에 담겨져 index.jsp 에 보내지면 id='content' 영역에 동적으로 include 됩니다.

 

// select.jsp 페이지 일 부분
<input type='button' value=' 입 력 ' id='btnRegister'>

// board.js 일부분
let url = 'index.jsp?inc=./board/';
if($id('btnRegister') != null){
   let btn = $id('btnRegister');
   btn.onclick = function(){
      let frm = $id('frmBrd');
      frm.action = url + 'register.jsp';
      frm.submit();
   }
}
// index.jsp 일부분
<div id='content'>
    <jsp:include page='<%=inc%>' />
</div>

 

입력 폼 만들기

 

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

<jsp:useBean id="p" class="bean.Page"/>
<jsp:setProperty property="*" name="p"/>

<div id='board'>
	<form name='frmBrd' id='frmInput' method='post' enctype='multipart/form-data'>
		<h2 class='title'>자유 게시물 작성</h2>
		<label>작성자</label>
		<input type='text' name='worker' value='홍길자'><br/>
		
		<label>제 목</label>
		<input type='text' name='subject' size='70' value='모두 모두 코로나 조심~'><br/>
	
		<textarea rows="20" cols="90" name='content'>test</textarea><br/>
	
		<label>암 호</label>
		<input type='password' name='pwd' value='1' ><br/>
		
		
		<label>파일첨부</label>
		<input type='file' name='attach' id='btnAttach' multiple/><br/>
		<span>[첨부파일은 반복해서 선택가능합니다.]</span>

		<div id='attachList'></div>
		
		<div id='btnZone'>
			<input type='button' value='저장' id='btnInsert' />
			<input type='button' value='취소' id='btnSelect'/>
		</div>
		
		<input type='hidden' name='findStr' size='30' value="<%=p.getFindStr()%>">
		<input type='hidden' name='nowPage' value="<%=p.getNowPage()%>">
	</form>

</div>

<script src = './js/file_upload.js'></script>
<script>
	upload.start('frmInput' , 'btnAttach', 'btnInsert', 'attachList', 
				'./board/result.jsp?job=registerR')
</script>

 

• 각종 입력 상자에는 테스트를 원활하게 하기 위해 임의의 초기값을 value 속성에 설정.
• 4~5행 : <jsp:useBean/>에 의해서 파라메터로 들어온 페이징 정보 처리.
• 8행 : 파일을 전송하기 위해 enctype을 선언함.
• 39~43행 : 파일 업로드및 미리보기 기능을 하는 file_upload.js 스크립트를 가져와 파일 미리보기 기능과 업로드 기능의 시작함수인 upload.start() 실행
• upload.start(A, B, C, D, E) 매개변수 설명을 간략해 해보겠습니다.
  • A : 입력자료가 있는 폼태그의 ID
  • B : 파일 첨부 버튼 ID
  • C : 전송(저장) 버튼 ID
  • D : 첨부된 이미지들이 추가될 영역의 ID(미리보기 영역)
  • E : form 태그의 값을 전달 받을 서버 페이지 정보.

[관련 동영상-게시물 입력(묵음)]