코드어게인

<JSP 다중파일업로드>

JSP에서는 여러개의 파일을 보낼수있는 폼이 필요하다.
여러개의 파일을 보낼려면 폼에서 반드시 2가지 처리를 해줘야한다.

 1) enctype="multipart/form-data"

 2) method="post" 

파일을 보내기위해서는 속성을 명시해줘야 전송이가능하다.

추가적인 설명을 붙이자면 multpart/form-data라는 속성은 문자가 아닌

파일 이미지등을 보낼때 주는 속성값이다.

그리고 이속성은 get방식으로는 전송할수없다.

get방식은 url에 담을수있는 정보를 보낼때 쓰는데. 이미지나 파일같은경우는 

데이터기 때문에 get방식으로는 송수신이 불가능하다. 

<form:form modelAttribute="item" method="post" enctype="multipart/form-data">
  <tr>
    <td class="label"><p>설명서 등록</p></td> <!-- 상품설명서 -->
    <td>
      <div>
        <button type="button" id="add_Instruction_file" style="display:none" class="table_btn"><
        span>파일찾기</span></button> 
        <p>
          <input type="file" name="itemInstructionFiles" multiple="multiple" />
          <form:input path="itemInstructionFileCode" value="0020" maxlength="10" style="display:none" />
        </p>
        <ul id="item_details_images">
          <c:forEach items="${item.itemFiles}" var="itemFile" varStatus="i">
            <c:if test="${itemFile.fileCode == 20}">
              <li id="item_file_id_${itemFile.fileId}">
                <span>${itemFile.fileOrgName}</span>
                <a href="javascript:deleteItemFiles('${itemFile.fileId}','${item.itemUserCode}');" 
                class="delete_item_image">
                  <button type="button" class="btn btn-gradient btn-xs"><span>선택삭제</span></button>
                </a>
              </li>
            </c:if>
          </c:forEach>
        </ul>
      </div>
    </td>
  </tr>
</form>

-하나의 아이템에 여러개의 설명서가 들어가는 1대다 구조의 파일업로드 JSP로직이다.

등록된 파일은 수정창에서 조회 가능하며 파일을 다운로드 하는 기능은 넣지 않았고 선택하여 삭제할수있게끔

코드를 짯다.

이렇게 자바단으로 데이터를 보내면 자바에서 처리하는 로직은 어떻게 짜야할까?

1)전송받은 컨트롤러에서 받는다

@RequestParam(value="itemInstructionFiles", required=false) MultipartFile[] itemInstructionFiles

2)여러개의 파일정보를 받을수있는 MultpartFile을 배열로 VO에 선언하여 준다. 

    private MultipartFile[] itemInstructionFiles;

3)뷰에서 받은 파일정보를 VO에 셋팅하여준다.

    item.setItemInstructionFiles(itemInstructionFiles);

4)자바의 파일 IO로직으로 파일을 실제 물리적으로 저장을 한다.

5)파일정보를 데이터베이스 테이블에 담는다.

여기서 파일 입출력을 다루지는 않을것이다.

MultipartFile로 넘어오는 정보는 파일이름,파일크기등이 넘어오는데

이때 자바에서는 확장자를 구분하여 저장시키기도 하고 제한두기도 하고 

파일크기로 제한을두는등 해당업무에 맞게 코딩을하여 사용한다. 

이부분은 프로젝트에서 공통으로 처리하는곳이 많다.

이렇게 파일을 뷰에서 받아온뒤

자바에서는 파일정보를 가공해서 

데이터베이스에 넣게되는데. 거의 프로젝트마다 공통된 부분이 많다.

파일명 같은경우 중복되면 안되서 UUID로 생성해서 저장시킨다.

프로젝트마다 파일을 DB에 저장시키는 방법이 다르지만

다중파일같은경우는 파일명이 중복되면 안되기때문에 실제파일명,중복처리한 파일명,파일경로 등은 

거의 필수적으로 들어간다. 

파일이 저장될때는 자바에서 처리되는과정

등록,수정이 다르게처리된다.

등록은 바로 파일저장을 시키면 되는데

수정같은경우는 조금복잡하다. 저장되는경우 / 저장안되는경우가 나눠지고 

등록된 파일을 삭제하는 로직도 들어가야 하기 때문이다.

그리고 파일을 뿌리는것도 동적으로 뿌려줘야하기때문에

리스트형태 private List<ItemFile> itemFiles = new ArrayList<>()  로 받아와서 처리가 된다.

동적으로 처리되는과정[JSP]

<ul id="item_details_images">
  <c:forEach items="${item.itemFiles}" var="itemFile" varStatus="i">
    <c:if test="${itemFile.fileCode == 20}">
    <li id="item_file_id_${itemFile.fileId}">
      <span>${itemFile.fileOrgName}</span>
      <a href="javascript:deleteItemFiles('${itemFile.fileId}','${item.itemUserCode}');" 
      class="delete_item_image">
      	<button type="button" class="btn btn-gradient btn-xs">
        <span>선택삭제</span></button>
      </a>
    </li>
    </c:if>
  </c:forEach>
</ul>

-여기서 <li> 태그를 보면 동적처리된것을 알수있다.

해당파일의 고유한 키값을 아이디값으로 줌으로써 그파일의 아이디로 다운로드,업로드가 가능하게 되는것이다.

저기서 연결된 펑션은 해당파일을 실제로 삭제를 시키는 펑션이다

<연결된펑션>

function deleteItemFiles(id,code) {

  var message = '파일이 실제로 삭제됩니다. 계속 진행하시겠습니까?'; 
  if (!confirm(message)) {
  return;
  } 

  var param = {'itemFileId': id,'itemUserCode':code};
  $.post('${requestContext.managerUri}/item/delete-item-file', param, function(response){
    Common.responseHandler(response);
    $('#item_file_id_' + param.itemFileId).remove();
  });	

}

 여기서 파라미터값으로 id와 code를 보내게되는데.

이업무 같은경우에는 각 아이템마다 코드를 생성하여 폴더관리를 하고있다. 그렇기때문에 코드값을 따로 보내서

처리하게되지만 파일id값으로 폴더를 생성시킨다면 굳이 코드값을 보낼필요는 없다.

이렇게 뷰에서 정보를 전송해준다면 자바에서는 2가지 작업이 진행된다

  1.DB에서의 파일정보삭제

  2.물리적인 파일삭제

이루어지게 된다.