컴포넌트를 생성하는 예제입니다.
- 설명
-
DEXTUploadX5 컴포넌트를 사용하려면 반드시 dextuploadx5-configuration.js 파일과 dextuploadx5.js 파일을 포함해야 합니다.
<script src="../dx5/dextuploadx5-configuration.js"></script> <script src="../dx5/dextuploadx5.js"></script>
브라우저가 dextuploadx5.js 스크립트 파일을 읽으면 DEXTUploadX5를 관리하는 dx5 객체가 자동으로 생성됩니다.
컴포넌트를 생성하려면 컴포넌트를 담고 있는 컨테이너 요소가 필요하고, 페이지의 마지막에 dx5.create 함수를 사용하여 컴포넌트를 생성할 수 있습니다.
컴포넌트의 크기는 컴포넌트를 담는 컨테이너의 크기를 기준으로 합니다. 그러므로 반드시 컨테이너의 크기를 지정해주시길 바랍니다.
<div id="dext5-container" style="width:500px; height:300px;"><!-- 컴포넌트를 담는 컨테이너 요소 --></div> <script> dx5.create({ // 멀티 버전은 mode를 "multi"로 설정하며, id 속성으로 컴포넌트 DOM 아이디를 부여합니다. // parentId는 컨테이너 아이디를 지정합니다. mode: "multi", id: "dext5", parentId: "dext5-container", // 컴포넌트는 버튼을 갖고 있지 않으므로 버튼 요소를 직접 만들어주어야 합니다. // button, input[type=button] 요소를 만들고 대상 아이디를 지정해주면 파일 추가 기능이 자동으로 연결됩니다. btnFile: "btn-add-files" }); </script>
만일 "DEXTUploadX5 Multi version loading failed!"" 메시지 창이 뜨는 경우에는 dextuploadx5-configuration.js에서 productPath 설정에 문제가 있는 것이므로 경로가 올바른지 확인해야 합니다.
DEXTUploadX5가 올바르게 생성되었다면 onDX5Created 콜백 함수를 호출하며, 만일 사용 중에 오류가 발생하면 onDX5Error 함수를 호출하도록 설정되어 있습니다.
function onDX5Error(id, code, msg) { // 컴포넌트 사용 중에 오류가 발생하면 호출됩니다. } function onDX5Created(id) { // 컴포넌트가 생성되면 호출됩니다. }
- 예제
-