컴포넌트를 여러 개 사용하는 예제입니다.
- 설명
-
하나의 페이지에 여러 개 컴포넌트(멀티 컴포넌트)를 동시에 사용할 수 있습니다.
한 번의 전송 명령으로 모든 컴포넌트의 파일을 업로드하려면, 한 컴포넌트에서 upload 함수를 사용하여 업로드를 시작한 후, onDX5UploadCompleted 이벤트가 발생하면, 다음 컴포넌트의 upload 함수를 호출하는 방법을 사용하여 순차적으로 업로드를 할 수 있습니다.
그러나 이런 방법 외에, 업로드할 파일만 하나로 모아서 한 번에 업로드할 수 있는 방법이 있습니다.
<!-- 컴포넌트 2개를 담을 컨테이너를 정의합니다. --> <div id="dext5-container-a" style="width:500px; height:200px;"></div> <div id="dext5-container-b" style="width:500px; height:200px;"></div> <!-- 실제 업로드를 담당할 컴포넌트를 담을 컨테이너를 정의합니다. --> <!-- 업로더는 눈에 잘 보이지 않도록 1px의 컨테이너로 정의합니다. --> <div id="dext5-container-uploader" style="width:1px; height:1px;"></div>
컴포넌트를 정의합니다.
dx5.create({ mode: "ie", id: "dext5-a", parentId: "dext5-container-a", btnFile: "btn-add-files-to-a" }); dx5.create({ mode: "ie", id: "dext5-b", parentId: "dext5-container-b", btnFile: "btn-add-files-to-b" }); dx5.create({ mode: "ie", id: "dext5-uploader", parentId: "dext5-container-uploader" });
파일을 업로드할 때, 두 컴포넌트로부터 업로드할 파일 항목을 얻어 dext5-uploader 컴포넌트에 등록을 하고, dext5-uploader 컴포넌트가 업로드를 시도합니다.
var uploader = dx5.get("dext5-uploader"); uploader.clearItems(); // 첫 번째 컴포넌트로부터 업로드를 하기 위한 파일 정보를 얻습니다. uploader.setUploableFilesFrom(dx5.get("dext5-a")); // 두 번째 컴포넌트로부터 업로드를 하기 위한 파일 정보를 얻습니다. uploader.setUploableFilesFrom(dx5.get("dext5-b")); uploader.setUploadURL("업로드 경로"); uploader.upload("AUTO");
서버에서는 DEXTUploadX5_ControlId 폼 이름을 사용하여 업로드한 파일이 어느 컴포넌트의 항목인지 구분할 수 있습니다.
List<FileItem> items = dextnj.getFileItems(); // DEXTUploadX5_ControlId 폼 이름을 사용합니다. List<FormItem> controls = dextnj.getFormItems("DEXTUploadX5_ControlId"); ... FormItem ctr = null; for (int i = 0; i < items.size(); i++) { ctr = controls.get(i); ... if (file.isEmpty() == false) { ... sb.append(String.format("%1$s|%2$s|%3$s\n", ctr.getValue(), ...)); } }
멀티 버전과 달리 IE 버전은 업로드가 완료된 항목들의 상태를 'DONE'으로 직접 변경해주어야 합니다.
IE 버전은 항목을 서로 공유하지 않기 때문에, 파일 업로드 역할을 담당하는 컴포넌트에서 업로드가 완료되었다 하더라도 dext5-a, dext5-b 컴포넌트의 원래 항목의 상태는 그대로이기 때문입니다.
function onDX5UploadCompleted(id) { var ret = null, dx = dx5.get(id); // 응답 데이터로부터 업로드 결과를 분석합니다. ret = parseResponseData(dx.getResponses()[0]); for (var i = 0; i < ret.length; i++) { dx = dx5.get(ret[i].cid); // 항목을 업로드 완료 상태로 변경합니다. dx.changeStatus(ret[i].fid, "DONE"); } ... } /** * "컨트롤아이디|항목고유아이디|항목(파일)이름\n컨트롤아이디|항목고유아이디|항목(파일)이름\n..." * 문자열 형식으로 받은 응답 데이터를 json 객체 형태로 변경하여 반환합니다. */ function parseResponseData(data) { var lines = data.split("\n"), tokens = null, ret = []; for (var i = 0, len = lines.length; i < len; i++) { if (!lines[i]) continue; tokens = lines[i].split("|"); ret.push({ cid: tokens[0], fid: tokens[1] }); } return ret; }
- 예제
-
파일 업로드 A 영역 (ID: dext5-a)
파일 업로드 B 영역 (ID: dext5-b)