Home > 멀티 버전 > 업로드
파일을 업로드하는 가장 간단한 예제입니다.
설명

dx5.create 함수를 사용하여 컴포넌트를 생성할 때, 생성 옵션 중 btnUploadAuto 속성에 button, input[type=button] 요소의 아이디를 지정하면 자동으로 업로드 함수가 호출되는 이벤트를 연결합니다.

<button id="btn-upload">파일 업로드</button>
<script>
  dx5.create({
    ...
    // 업로드를 수행할 버튼을 연결합니다.
    btnUploadAuto: "btn-upload"
  });
</script>

파일을 업로드하려면 업로드를 처리할 서버 측 웹 경로를 설정해주어야 합니다.

파일 업로드 경로는 업로드하기 전에 설정하면 되지만, 일반적으로 onDX5Created 콜백 함수에서 지정합니다.

function onDX5Created(id) {
  var dx = dx5.get(id);
  // dx5.canonicalize 함수는 주어진 상대 경로에 대한 절대 경로(http, https 포함) 값을 반환하는 유틸 함수입니다.
  dx.setUploadURL(dx5.canonicalize("./simple-upload.do"));
}

DEXTUploadX5는 파일을 보내는 sender 역할을 수행합니다. 이와 달리 DEXTUploadNJ는 서버 측에 파일을 받는 receiver 역할을 담당합니다.

이 샘플은 파일 업로드 처리를 서블릿(CommonFileUpload 클래스)이 담당하며 web.xml에 common-upload.do로 매핑되어 있습니다.

RFC 1867 규약에 따라 multipart/form-data로 전송되는 데이터는 POST 형식으로 받아야 합니다. CommonFileUpload 클래스의 doPost 메소드에서 DEXTUploadNJ의 FileUpload 클래스를 사용하여 서버 측 업로드 처리를 수행합니다.

DEXTUploadNJ의 자세한 기능이나 설명은 DEXTUploadNJ 제품 매뉴얼 및 샘플을 참고하시길 바랍니다.

# 서버 측 설정입니다.						
						
FileUpload dextnj = null;
		
try {
  // HTTP 요청 객체와 환경 설정 객체를 인자로 받는 FileUpload 객체를 생성합니다.
  dextnj = new FileUpload(request, env);
  
  // 클라이언트로부터 전송된 데이터로부터 파일 데이터 부분을 모두 임시 파일로 저장합니다.
  // 임시 저장 위치는 Environment#setTempRepository 메소드로 설정됩니다.
  dextnj.prepare();
  
  // FileUpload#getFileItem 메소드를 사용하여 폼 이름으로 하나씩 호출할 수 있지만,
  // getFileItems 메소드를 사용하면 컬렉션 객체를 얻을 수 있습니다.
  List<FileItem> items = dextnj.getFileItems();
  
  // 응답 데이터를 기록하기 위한 버퍼입니다.
  StringBuffer sb = new StringBuffer();
  
  for (FileItem next : items) {
    if (next.isEmpty() == false) {
      // 대상이 올바른 파일이라면 실제 저장할 위치로 임시 파일을 저장(복사 혹은 이동)합니다.
      // 인자로 주어진 디렉터리 경로가 없다면 Environment#setDefaultRepository 메소드로 설정된 경로가 타깃이 됩니다.
      next.save();
      
      // 저장된 파일의 위치를 응답 데이터 버퍼에 기록합니다.
      sb.append(String.format("A: %1$s\n", next.getLastSavedFilePath()));
    }
  }
  
  // 응답 데이터를 작성합니다.
  response.setCharacterEncoding("UTF-8");
  response.setContentType("text/plain");
  response.getWriter().write(sb.toString());

} catch (Exception e) {
  // 문제가 생기면 반드시 오류를 발생시켜야 합니다.
  // 만일 예외 처리를 하지 않고 싶다면
  // response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
  // 를 사용하여 HTTP 상태 코드를 오류로 처리해야 합니다.
  throw new ServletException(e);
} finally {
  // 리소스를 제거합니다.
  // 삭제가 되지 않은 임시 파일이 있다면 모두 삭제됩니다.
  if (dextnj != null) dextnj.close();
}

DEXTUploadX5는 브라우저가 아닙니다. 그러므로 서버와 DEXTUploadX5 간의 통신은 응답 데이터를 통해서만 주고받을 수 있습니다.

DEXTuploadX5는 응답 데이터가 HTTP 상태코드가 오류인 경우만, onDX5Error 콜백 함수를 호출하며, 나머지 경우는 모두 성공이라고 판단합니다.

업로드가 성공적으로 완료가 되면 onDX5UploadCompleted 콜백 함수가 호출됩니다.

function onDX5UploadCompleted(id) {
  // 업로드가 완료되면 호출됩니다.
}
예제

파일을 추가한 후 업로드 버튼을 클릭하면 파일이 업로드됩니다.