96 lines
3.8 KiB
HTML
96 lines
3.8 KiB
HTML
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<link rel="stylesheet" href="../innorix.css">
|
|
<script src="../innorix.js"></script>
|
|
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
|
|
<script>
|
|
var control = new Object();
|
|
innorix.setLanguage('ko');
|
|
window.onload = function() {
|
|
// 파일전송 컨트롤 생성
|
|
control = innorix.create({
|
|
el: '#fileControl', // 컨트롤 출력 HTML 객체 ID
|
|
transferMode: 'upload', // 업로드, 다운로드 혼합사용
|
|
agent : true, // Agent모드 (설치형)
|
|
installUrl: '../install/install.html', // Agent 설치 페이지
|
|
allowExtension : ["png", "jpg", "jpeg"],
|
|
showPreviewImage: true, // 이미지 미리보기
|
|
uploadUrl: './upload.jsp', // 업로드 URL
|
|
});
|
|
|
|
// 파일 첨부시 에러
|
|
control.on('addFileError', function (p) {
|
|
alert(p[0].message + "\n " + p[0].type);
|
|
});
|
|
|
|
// 업로드 완료 이벤트
|
|
control.on('uploadComplete', function (p) {
|
|
|
|
console.log(p.files);
|
|
var f = p.files;
|
|
var r = "Upload complete\n\n";
|
|
for (var i = 0; i < f.length; i++ ) {
|
|
r += f[i].controlId + " " + f[i].clientFileName + " " + f[i].fileSize + "\n";
|
|
}
|
|
alert(r);
|
|
});
|
|
|
|
// 파일 선택 시
|
|
control.on('onSelectRows', function (p) {
|
|
console.log(p);
|
|
|
|
if(p[0].thumbnailUrl != undefined){
|
|
console.log(p[0].thumbnailUrl); // 이미지 주소
|
|
}
|
|
|
|
});
|
|
};
|
|
|
|
// 미리보기 (이미지 전체)
|
|
function fnShowPreviewAll(){
|
|
var f = control.getAllFiles(); // 첨부한 전체 파일 정보
|
|
console.log(f);
|
|
|
|
var previewAllZone = $("#previewAllZone"); // 이미지 출력 영역
|
|
for(var i=0; i<f.length; i++){
|
|
if(f[i].thumbnailUrl != undefined){ // 썸네일 url이 생성된 이미지 파일만 구분
|
|
var imgTag = document.createElement('img');
|
|
|
|
imgTag.src = 'http://127.0.0.1:4033' + f[i].thumbnailUrl; // (http) 사용자 PC의 에이전트 ↔ 브라우저 통신 url
|
|
// imgTag.src = 'https://127.0.0.1:4523' + f[i].thumbnailUrl; // (https) 사용자 PC의 에이전트 ↔ 브라우저 통신 url
|
|
|
|
// 이미지 출력 예시 <img src="http://127.0.0.1:4033p[0].thumbnailUrl">
|
|
|
|
previewAllZone.append(imgTag); // 이미지 출력 영역에 append
|
|
}
|
|
}
|
|
$("#previewAllZone").show();
|
|
}
|
|
|
|
// 닫기
|
|
function fnClose(){
|
|
$("#previewAllZone").empty();
|
|
$("#previewAllZone").hide();
|
|
}
|
|
|
|
|
|
</script>
|
|
<style>
|
|
#previewAllZone{display:none; width:800px; height:400px; border:2px solid #666; background-color:#f2f2f2;}
|
|
#previewAllZone > img{max-width: 200px; max-height: 200px; display:inline-block;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="../gnIndex.html">← 예제 목록</a><br /><br />
|
|
|
|
<div id="fileControl"></div><br/>
|
|
|
|
<input type="button" value="멀티 파일 추가" onclick="control.openFileDialog();"/>
|
|
<input type="button" value="업로드" onclick="control.upload();"/>
|
|
|
|
<input type="button" id="previewAllBtn" data-rowid="" value="미리보기(전체)" onclick="fnShowPreviewAll();"/>
|
|
<div id="previewAllZone" onclick="fnClose();"></div>
|
|
</body>
|
|
</html> |