Home > IE 버전 > 폼 전송
파일과 폼 데이터를 전송하는 예제입니다.
설명

DEXTUploadX5는 폼 데이터를 자동으로 전송하는 기능을 정책상 제공하지 않습니다.

과거에는 form 요소를 하나만 사용하는 페이지 구성이 일반적이었지만, 최근에는 하나의 페이지에 다양한 섹션이 구성되며, 구성마다 다른 action 값을 갖는 form 요소를 필요로 하는 경우가 많아졌기 때문에, 파일이 업로드되는 시점에 form 하위 요소를 모두 추가하여 전송하는 것은 의도치 않은 상황일 수 있습니다.

더불어 ORAF 업로드 방식이 아닌 OROF 같은 경우에는 폼 데이터를 전송해야 할 시점을 알 수 없기 때문에, 데이터를 전송하는 것이 논리적으로 문제가 될 수 있습니다.

 

DEXTUploadX5는 파일 업로드가 완료된 후 콜백 함수(onDX5UploadCompleted)가 호출됩니다.

이 함수에서 서버로부터 받은 파일 정보를 가지고 form 요소가 갖는 폼 데이터를 따로 처리(submit)하는 방법을 사용하는 것을 권장합니다.

이 방법은 파일과 다른 문자열 데이터를 완벽히 분리하여 처리하기 때문에, 서비스 처리 구조가 더 명확해지는 장점이 있습니다.

function transfer() {
  var dx = dx5.get("dext5");
  if (dx.hasUploadableItems()) {
    // 업로드할 파일이 있다면 업로드를 먼저 수행합니다. 
    // 업로드가 완료되면 onDX5UploadCompleted 콜백 함수가 호출됩니다.
    // 콜백 함수가 호출되면 폼 데이터를 전송하도록 구성합니다.
    dx.upload("AUTO");
  } else {
    // 업로드할 대상이 없으므로 바로 폼 데이터를 전송합니다.
    submit(null);
  }
}

// 업로드가 완료(서버 측 파일 업로드 처리가 완료)되면 호출되는 콜백 함수입니다.
function onDX5UploadCompleted(id) {
  // ORAF이므로 응답 데이터는 무조건 1개입니다.
  // 이 응답 데이터를 가지고 폼 데이터를 전송합니다.
  submit(dx5.get(id).getResponses()[0]);  
}

function submit(response) {
  var formObj = document.getElementsByTagName("form")[0];
  // 응답 데이터를 hidden 요소에 설정합니다.
  formObj.newFileKeys.value = response || "";
  // 폼 데이터를 submit합니다.
  formObj.submit();
}

이 구조는 파일 업로드는 upload-file.do로 매핑된 UploadService 서블릿에서 처리를 하고, 폼 데이터는 form-process.do로 매핑된 FormService에서 최종적으로 처리합니다.

예제

MAX 파일 개수: 10개, 개별 용량 제한: 1KB ~ 1MB, 전체 용량 제한: 10MB