fairnet/src/main/webapp/innorix_2/gnexam/dynamicCreate.html
2024-10-30 18:19:30 +09:00

101 lines
3.8 KiB
HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../innorix.css">
<script src="../innorix.js"></script>
<script>
var control_array = [] //멀티컨트롤을 담을 배열 선언
var controlFlag = 0; //컨트롤 동적 생성 시, 개별 구분을 위한 플래그 초기화
var controlTotal = new Object(); //전체 업로드를 위한 히든 컨트롤 Object 선언
window.onload = function() {
controlTotal = innorix.create({ // 전체 업로드를 위한 컨트롤 생성
el: '#fileControlTotal', // 컨트롤 출력 HTML 객체 ID
transferMode: 'both', // 업로드, 다운로드 혼합사용
installUrl: '../install/install.html', // Agent 설치 페이지
agent: true, // true : Agent 설치형 모드 사용, false : HTML5 모드 사용
uploadUrl: './upload.jsp', // 업로드 URL
});
// 전체 업로드 완료 이벤트
controlTotal.on('uploadComplete', function(p){
console.log(p);
});
};
// 컨트롤 추가 생성
function fnControlCreate(){
var controlName = "fileControl"+controlFlag; //컨트롤 고유 ID 구성
var newDiv = document.createElement('div'); // div 동적 생성
newDiv.setAttribute('id', controlName); // 생성한 div에 id지정
document.body.appendChild(newDiv);
var attachBtn = document.createElement('button'); //div와 연동할 파일찾기 버튼 추가
var label = document.createTextNode('파일선택');
attachBtn.appendChild(label);
attachBtn.addEventListener('click', function(){ //버튼에 파일찾기 매서드 연동
attachFile(controlName)
});
document.body.appendChild(attachBtn);
var uploadBtn = document.createElement('button'); //div와 연동할 업로드 버튼 추가
var label = document.createTextNode('개별업로드');
uploadBtn.appendChild(label);
uploadBtn.addEventListener('click', function(){ // 버튼에 업로드 매서드 연동
uploadFile(controlName)
});
document.body.appendChild(uploadBtn);
control = innorix.create({ // 컨트롤 생성
el: "#"+controlName, // 개별 Element ID 구성
transferMode: 'both', // 업로드, 다운로드 혼합사용
installUrl: '../install/install.html', // Agent 설치 페이지
uploadUrl: './upload.jsp', // 업로드 URL
agent: true,
width: 500,
height: 100,
maxFileSize: 1024*1024
});
// 컨트롤 첨부 에러 이벤트 추가
control.on('addFileError', function(p){
console.log(p);
});
control_array[controlName] = control; //생성된 컨트롤을 배열에 추가
// 첨부 기능 구성
function attachFile(controlName){
control_array[controlName].openFileDialog();
};
// 업로드 기능 구성
function uploadFile(controlName){
control_array[controlName].upload();
};
controlFlag = controlFlag+1; // 플래그 구성
}
// 전체 업로드
function totalUpload(){
for(var i=0; i<controlFlag; i++){
var controlName = "fileControl"+i;
controlTotal.addFiles(control_array[controlName].getAllFiles());
}
controlTotal.upload();
}
</script>
</head>
<body>
<p>동적으로 여러개의 컨트롤 생성 후 통합 업로드</p>
<input type="button" value="컨트롤 생성" onclick="fnControlCreate();"/>
<div id="fileControlTotal" style="display:none"></div><br/>
<input type="button" value="전체 업로드" onclick="totalUpload();"/>
</body>
</html>