[JSP] Pagination, AJAX File Upload, 다운로드

*Pagination

-많은 레코드로 인해 여러 페이지가 생성되고, 한번에 모든 페이지를 보여줄 수 없으므로

  페이지간 이동을 하기위해.

-7 단계로 생성

  [ << ] … [ 1 ] [ 2 ] [ 3 ] ... [ >> ]

1.한 화면에 보여줄 페이지 인덱스 수.

   int pageNumber=3;

 

2.화면에 보여줄 시작페이지 번호

  int startPage=(( currentPage - 1)/pageNumber) * pageNumber+1; //1,2,3 => 1,  4,5,6 =>2

 

3. 화면에 보여줄 마지막 페이지 번호

 int endPage= (((startPage-1)+pageNumber)/pageNumber)*pageNumber;

 

4. 총 페이지 수가 연산된 마지막 페이지 수보다 작다면 총 페이지수가 마지막 페이지수로 설정.

 if( totalPage <= endPage){

     endPage=totalPage;

 }

 

5. 첫페이지가 인덱스화면 아닌경우

  int movePage=0;

 

  StringBuilder prevMark=new StringBuilder();

  prevMark.append(“[ &lt;&lt; ]”);

  if( currentPage > pageNumber){ // 시작페이지보다 1적은 페이지로 이동

   movePage=startPage-1;

   prevMark.delete( 0,prevMark.length );

   prevMark.append(“[ <a href=‘board_list.jsp?currentPage=”).append( movePage ).

   append(“’> &lt;&lt; </a> ] “ );

  }

 prevMark.append(“ … “);

 

6.시작페이지 번호부터 끝 페이지 번호까지 화면에 출력

 

 movePage=startPage;

 StringBuilder pageLink=new StringBuilder();

  while( movePage <= endPage ){

    if( movePage == currenPage ) { //현재 페이지는 링크를 활성화할 필요가 없다.

          pageLink.append(“[ “).append(currentPage).append(“ ] “);

    }else{

         pageLink.append(“[ <a href=‘board_list.jsp?currentPage=“).append(movePage)

  .append(“’>”).append(movePage).append(“</a> ] “);  

    }

     movePage++;

 }

 

7. 뒤에 페이지가 더 있는경우

 StringBuilder nextMark=new StringBuilder(“[ &gt;&gt; ]”);

if( totalPage > endPage ){

   movePage=endPage+1;

   nextMark.delete(0,nextMark.length);

   nextMark.append(“[ <a href=‘board_list.jsp?currentPage=“).append(movePage)

    .append(“’>”).append(“&gt;&gt;”).append(“</a> ]”);

 }

 

---

 

*이미지 미리보기

 - 이미지를 선택하면 보안 이슈가 이슈가 있어서 바로 접근이 불가능하다.

  => JavaScript : FileReader Stream을 사용한다.

 

작업순서)

 

1.HTML File Control에 접근

 $(“selector”).이벤트함수(function( evt ){

  -파일을 선택하면 해당파일이 evt객체 target속성에 files배열로 얻어진다.

    var file=evt.target.files[0];

 

2.스트림을 생성

   var reader=new FileReader();

 

3. FileReader 객체의 onload이벤트 핸들러 설정

  reader.onload=function( evt ){ //파일읽기 작업이 완료(onload)이되면 함수 호출

     $(“#이미지id”).prop(“src”, evt.target.result);   //src 속성에 선택한 파일명 설정

  }

 

 4.파일을 읽어들여 img 태그에 미리보기 설정.

   reader.readAsDataURL( file );

  

*AJAX File Upload

 - HTML Form Control의 값은 web parameter전송방식으로 전송(

   back-end에서 HttpServletRequest객체를 사용하여 parameter 처리할 수 있다.

   )하고 File만 비동기방식으로

  전송한 방식.

 -파일 업로드와 Form Control이 혼재하여 제공될 때 사용하면 편리.

 

사용법)

 

1.contentType속성 false :

  $.ajax({

       contentType : false => parameter 전송방식에서 binary 전송방식으로 변경

 

 2.processData 속성 false :

      processData:false =>요청 URL에 QueryString이 연결되지 않는다.

                    ( HTML Form Control값 전송 => HTTP Protocol 에  payload전달)

  form태그 => parameter 전송 그대로 유지

     <form id=“아이디” name=“이름” action=“요청받는 JSP URL” method=“post”>

        <input type=“text,radio,password, checkbox,,,”>//일반 Form Control

         <input type=“file” name=“이름” id=“아이디”/>

    </form>

 

 3.form 객체 얻기

   var form=$(“아이디”)[0];//parameter 전송방식

 

 4.FormData객체 생성 ( parameter  전송방식 -> binary 전송방식 변경)

   var formData=new FormData( 찾아낸 form객체 );

 

5. $.ajax 에서 data를 전송할 때 사용하는 속성 data

  $.ajax({

     ..

     ..

    data: formData

  });

   $.ajax({

     url : “파일을 저장할 URL”,

     type:”post”,

     contentType: false ,

     processData: false,

     data: formData,

 

     dataType : ”json”,

     error:function(xhr){

       xhr.status

     },

     success : function( jsonObj ){

        파일업로드 후 결과를 보여주는 코드 작성

    }

    });

 

formData :

Parameter 전송방식 form -> binary 전송 방식 form 변환된 객체

   => back-end 에서 MultipartRequest 객체를 사용하여 값들을 받을 수

       있다.

 

*무조건 다운로드

 - web browser는 브라우저가 해석 할 수 있는 파일에 대해서는 브라우저가 실행해서 보여준다.

 -web browser가 해석할 수 없는 파일은 자동 다운로드가 된다.

-

 -IOStream 필요.

 

순서)

 

1.페이지지시자의 응답방식을 변경.( HTML응답 -> stream으로 응답할 수 있게 변경 )

  contentType=“application/octet-stream” => 링크로 연결된 파일명이 다운로드가 된다.

 

2. 응답헤더변경 : 링크로 연결된 파일명에서 사용자가 선택한 파일의 명으로

     (HTML을 응답하는  정보를 가진 header 를 파일을 응답하기위한 정보를 가지도록 설정)

    response.setHeader(“Content-Disposition”,”attchment;fileName=다운로드할 파일명”)

 

3. 다운로드할 파일의 정보를 얻기

   File file=new File(“HDD경로”+파일명);

 

4. 다운로드할 파일에 InputStream  연결

 _jspService(HttpServletReqeust request,HttpServletReponse response)

 FileInputStream fis=new FileInputStream( file.getAbsoluteFile() );

   OutStream os=response.getOutStream();

 

5. 읽어 들인 파일을 저장할 배열을 생성하고, 파일에서 읽어들여 출력 스트림으로 출력

  byte[] readData=new byte[512]; //1024

  

   int readSize=0;

  

   while( (readSize=fis.read( readData )) != -1 ){

     os.write( readData,0, readSize );

   }

 

6.출력스트림 초기화 : out 내장객체는 HTML을 출력할목적의 스트림 => File출력

  out.clear();

 

7.응답헤더 초기화( 다운로드 파일의 정보가 설정된 헤더를 초기화)

  out.pageContext.pushBody();