Upload
Upload 1,000+ items
사용자 대기 시간을 줄이기 위해 1,000개 이상의 항목(파일 및 폴더)을 첨부할 경우 파일 상자에 모든 파일 목록이 표시되지 않습니다.
| Name |
Type |
Default |
Description |
| maxMassFileListCount |
Number |
1000 |
1,000개 이상의 항목이 첨부된 경우 파일 상자 UI를 대량 업로드 모드로 전환합니다. |
// upload.html
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
uploadURL: "./upload.jsp",
maxMassFileListCount: 1000,
boxConfig: box_config.upload_basic
});
…
Multi upload boxes
웹 페이지에 여러 개의 업로드 파일 상자를 만듭니다.
// upload.html
<body>
<div id="fileBox1"></div><br />
<div id="fileBox2"></div><br />
<div id="fileBox3" style="display:none";></div>
<input type="button" value="Upload" onclick="uploadAll();" />
</body>
<script>
var box1 = new Object();
var box2 = new Object();
var box3 = new Object();
window.onload = function() {
box1 = innorix.create({
el: '#fileBoxl',
uploadUrl: './upload.jsp'
});
box2 = innorix.create({
el: '#fileBox2',
uploadUrl: './upload.jsp'
});
box3 = innorix.create({
el: '#fileBox3',
uploadUrl: './upload.jsp'
});
}
function uploadAll() {
box3.addFiles(control1.getUploadFiles());
box3.addFiles(control2.getUploadFiles());
box3.upload();
}
</script>
Resize the image files
이미지를 업로드할 때 크기가 조정된 이미지가 생성되어 함께 업로드됩니다. (jpg, png, gif, bmp)
| Name |
appendThumbnailPeoperty() |
| Description |
이미지를 업로드할 때 크기가 조정된 이미지가 생성되어 함께 업로드됩니다. (jpg, png, gif, bmp) |
| Return Type |
Nonevoid |
| Input parameter |
# JSON Object
Index(String), Width(Number), Height(Number), Baseline(STRING)
box.appendThumbnailProperty(1, 300, 200, "VERTICAL");
box.appendThumbnailProperty("ALL", 300, 200, "HORIZONTAL");
box.appendThumbnailProperty("ALL", 300, 200, "FIX");
|
// upload.html
<body>
<div id="fileBox"></div><br />
<input type="button" value="Upload" onclick="thumbnail_upload();" />
</body>
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
uploadURL: "./upload.jsp",
boxConfig: box_config.upload_basic
});
}
function thumbnail_upload(){
box.appendThumbnailProperty("ALL", 200, 200, "VERTICAL");
box.upload();
}
</script>
Watermarks on images
이미지 업로드 시 원본 및 크기 조정된 이미지에 워터마크를 추가하여 업로드 합니다. (jpg, png, gif, bmp)
| Name |
appendWatermarkProperty() |
| Description |
이미지 업로드 시 원본 및 크기 조정된 이미지에 워터마크를 추가하여 업로드 합니다. (jpg, png, gif, bmp) |
| Return Type |
Nonevoid |
| Input parameter |
# JSON Object
Index(String), imageUrl(String), Image type(String), Position(String)
box.appendWatermarkProperty("ALL", "./logo.png", "ALL", "LEFT|BOTTOM")
box.appendWatermarkProperty("1", "./logo.png", "ORIGINAL", "RIGHT|TOP")
box.appendWatermarkProperty("1", "./logo.png", "THUMBNAIL", "CENTER|CENTER")
|
// upload.html
<body>
<div id="fileBox"></div><br />
<input type="button" value="Upload" onclick="watermark_upload();" />
</body>
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
uploadURL: "./upload.jsp",
boxConfig: box_config.upload_basic
});
}
function thumbnail_upload(){
box.appendWatermarkProperty("ALL", "innorix_logo.png", "ALL", "LEFT|BOTTOM")
box.upload();
}
</script>
파일 헤더와 확장자를 비교하여 일치하는지 확인하십시오.
| Name |
Type |
Default |
Description |
| useSignature |
Boolean |
true |
파일 헤더와 확장자를 비교하십시오. |
// upload.html
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
uploadURL: "./upload.jsp",
useSignature: true,
…
Change the save path
서버에서 저장 경로를 변경합니다.
// upload.jsp
<%@ page import="com.innorix.transfer.InnorixUpload" %>
<%
if (request.getMethod().equals("POST"))
{
…
InnorixUpload uploader = new InnorixUpload(request, response, maxPostSize, directory);
String newSavePath = "New path";
uploader.setDirectory(newSavePath);
uploader.run();
}
Save in a new sub-folder
새 하위 폴더를 만들고 폴더에 파일을 저장합니다.
// upload.html
<body>
<div id="fileBox"></div><br />
<input type="button" value="Upload" onclick="upload_post();" />
</body>
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
uploadURL: "./upload.jsp",
boxConfig: box_config.upload_basic
});
function upload_post(){
var postObj = new Object();
postObj._subdir = "subDir";
box.setPostData(postObj);
box.upload();
}
};
</script>
// upload.jsp
<%@ page import="com.innorix.transfer.InnorixUpload" %>
<%
if (request.getMethod().equals("POST"))
{
…
InnorixUpload uploader = new InnorixUpload(request, response, maxPostSize, saveDir);
String _subdir = uploader.getParameter("_subdir");
uploader.setOverwrite(true);
…
Overwrite duplicated files
| Name |
setOverwrite() |
| Description |
중복 파일이 있는 경우 덮어씁니다. |
| Return Type |
Nonevoid |
| Input parameter |
(Boolean) – true, false |
// upload.jsp code
<%@ page import="com.innorix.transfer.InnorixUpload" %>
<%
if (request.getMethod().equals("POST"))
{
…
InnorixUpload uploader = new InnorixUpload(request, response, maxPostSize, saveDir);
uploader.setOverwrite(true);
…
Put no. duplicated files
| Name |
setOverwrite() |
| Description |
중복 파일이 있는 경우 덮어씁니다. |
| Return Type |
Nonevoid |
| Input parameter |
(Boolean) – true, false |
// upload.jsp code
<%@ page import="com.innorix.transfer.InnorixUpload" %>
<%
if (request.getMethod().equals("POST"))
{
…
InnorixUpload uploader = new InnorixUpload(request, response, maxPostSize, saveDir);
uploader.setOverwrite(false);
…
Rename uploaded files
확장자를 제외한 파일 이름만 변경합니다.
// upload.jsp
<%@ page import="com.innorix.transfer.InnorixUpload" %>
<%
if (request.getMethod().equals("POST"))
{
…
InnorixUpload uploader = new InnorixUpload(request, response, maxPostSize, directory);
String ext = "";
String newFileName = "New file name";
if (_orig_filename != null){
ubfold_pos = _orig_filename.lastIndexOf(".");
ext = _orig_filename.substring(ext_pos);
}
uploader.setFileName(newFileName + ext);
uploader.run();
Process without files
업로드 파일이 없을 때 업로드 과정입니다.
<body>
<div id="fileBox"></div><br />
<input type="button" value="upload" onclick="form_submit();" />
</body>
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
uploadURL: "./upload.jsp",
boxConfig: box_config.upload_basic
});
function form_submit(){
if(box.getAllFiles() == null){
var innoJquery = innorix._load("innoJquery");
innoJquery('form#f_write').submit();
}else{
box.upload();
}
};
box.on('uploadComplete', function(p){
var files = JSON.stringify(f);
var innoJquery = innorix._load("innoJquery");
innoJquery('form#f_write').append('<input type="hidden" name="files" id="files" value=\'' + files + '\' />');
innoJquery('form#f_write').submit();
});
}
</script>
Download
Download 1,000+ files
사용자 대기 시간을 줄이기 위해 다운로드 파일 목록에 1,000개 이상의 항목(파일 및 폴더)이 있는 경우 파일 상자에 모든 파일 목록이 표시되지 않습니다.
| Name |
Type |
Default |
Description |
| maxMassFileListCount |
Number |
1000 |
다운로드 파일 목록에 1,000개 항목이 있을 때 파일 상자 UI를 대량 다운로드 모드로 전환합니다. |
// download.html
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
maxMassFileListCount: 1000,
boxConfig: box_config.download_basic
});
…
Multi download boxes
웹 페이지에 여러 다운로드 파일 상자를 만듭니다.
// download.html
<body>
<div id="filebox1"></div><br />
<div id="filebox2"></div><br />
<div id="filebox3" style="display: none;"></div><br />
<input type="button" value="download" onclick="downloadAll();" />
</body>
<script>
var box1 = new Object();
var box2 = new Object();
var box3 = new Object();
window.onload = function() {
box1 = innorix.create({
el: '#fileBox1',
boxConfig: box_config.download_basic
});
box2 = innorix.create({
el: '#fileBox2',
boxConfig: box_config.download_basic
});
box3 = innorix.create({
el: '#fileBox3',
boxConfig: box_config.download_basic
});
box1.on('loadComplete', function (p) {
box1.presetDownloadFiles(fileArray1[]);
});
box2.on('loadComplete', function (p) {
box2.presetDownloadFiles(fileArray2[]);
});
function downloadAll() {
box3.addFiles(control1.getDownloadFiles());
box3.addFiles(control2.getDownloadFiles());
box3.download();
}
};
</script>
Process after remove items
파일 상자에 제거된 파일 정보를 반환합니다.
// download.html
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
boxConfig: box_config.download_basic
});
box.on('afterRemoveFiles', function(p){
console.log(p);
});
};
</script>
When ` in the file name
파일 이름에 ` 가 있을 때 파일 이름을 바꿉니다
// download.html
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
boxConfig: box_config.download_basic
});
box.presetDownloadFiles([{
modificationTime: modifidate,
printFileName: '\'filename.zip', // Use \' instead '
fileSize: fileSize,
downloadUrl: downloadUrl
}]);
};
Common
Mix upload and download
파일 상자에서 업로드 및 다운로드 기능을 혼합합니다.
| Name |
Type |
Default |
Description |
| transferMode |
String |
both |
파일박스 전송 모드를 설정합니다.
both: 동일한 파일 상자에서 업로드 및 다운로드
upload: 업로드만
download: 다운로드만
|
// html code
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
transferMode: 'both',
uploadUrl: './upload.jsp',
boxConfig: box_config.combine_basic
});
};
</script>
Custom file box
파일 상자 기능을 지원하는 개체를 활성화합니다.
// html code
<div id="fileTable" style="overflow:auto; width:500px; height:200px; border: 1px solid #c0c0c0;">
<table id="fileTable" class="fileTable">
<thead>
<tr>
<th class="fileInfo">filePath</th>
<th class="fileInfo">fileSize</th>
<th class="fileInfo">fileType</th>
<th>File Name</th>
<th>Size</th>
<th>Type</th>
<th>Remove</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script>
var box = new Object();
var control = new Object();
var tableRowInsert = true;
innoJquery(document).ready(function() {
box = innorix.create({
el: '#fileBox',
installUrl: '../install/install.html',
boxConfig: box_config.combine_basic
});
box.on('afterAddFiles', function (p) {
if (tableRowInsert == true) {
for (var i = 0; i < p.length; i++ ) {
var _filePath = p[i].filePath;
var _fileSize = p[i].fileSize;
var _fileID = p[i].id;
var _fileType = "normal";
var arr = (_filePath.replace(/\\/gi,"/")).split("/");
var fileName = arr[arr.length-1];
var fileSize = bytesToSize(_fileSize);
var fileType = "Normal";
if (_fileSize > 104857600) {
var _fileType = "large";
var fileType = "Large";
}
innoJquery('#fileTable > tbody:last').append(' \
<tr class="fileTable"> \
<td class="fileInfo">' + _filePath + '</td> \
<td class="fileInfo">' + _fileSize + '</td> \
<td class="fileInfo">' + _fileType + '</td> \
<td>' + fileName + '</td> \
<td>' + fileSize + '</td> \
<td>' + fileType + '</td> \
<td><input type="button" value="Delete" onClick="deleteRow(this,\'' + _fileID + '\')"/></td> \
</tr>\''
);
}
}
});
});
</script>
When using iframe
파일 상자가 iframe에 있을 때 iframe 모드를 설정합니다.
| Name |
Type |
Default |
Description |
| iframeOutside |
Boolean |
True |
파일 상자가 iframe에 있을 때 iframe 모드를 설정합니다. |
| iframeOutsideCssURL |
String |
|
상위 프레임의 CSS URL(innorix.css)을 설정합니다. |
// html code
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
iframeOutside: true,
iframeOutsideCssURL: CSSFilePath,
boxConfig: box_config.combine_basic
});
};
</script>
Transfer window in iframe
iframe 외부의 전송 창 위치를 설정합니다.
| Name |
Type |
Default |
Description |
| iframeOutsideLeft |
Number |
|
왼쪽에서 전송 창 위치를 설정합니다. (픽셀) |
| iframeOutsideTop |
Number |
|
상단에서 전송 창 위치를 설정합니다. (픽셀) |
| iframeOutsideLocation |
String |
|
top: 최상위 프레임에 전송 창을 표시합니다.
parent: 파일박스 프레임에서 1레벨 위 레이어에 전송창을 표시합니다.
|
| iframeOutsideMarginLeft |
Number |
|
왼쪽에서 전송 창 여백을 설정합니다. (픽셀) |
| iframeOutsideMarginTop |
Number |
|
위에서부터 전송 창 여백을 설정합니다. (픽셀) |
// html code
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
iframeOutside: true,
iframeOutsideCssURL: CSSFilePath,
iframeOutsideLeft: "default",
iframeOutsideLocation: "top",
iframeOutsideMarginLeft: "default",
iframeOutsideMarginTop: "default",
iframeOutsideTop: "default",
boxConfig: box_config.combine_basic
});
};
</script>
Custom value for front-end
메타 데이터에 더 많은 정보를 추가합니다.
// html code
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
enableDropZone: false,
boxConfig: box_config.combine_basic
});
function upload_post(){
var postObj = new Object();
postObj._customValue = "customValue";
box.setPostData(postObj);
box.upload();
};
};
</script>
// jsp code
<%@ page import="com.innorix.transfer.InnorixUpload" %>
<%
… InnorixUpload uploader = new InnorixUpload(request, response, maxPostSize, saveDir);
String _customValue = uploader.getParameter("_customValue");
…
Custom value for back-end
서버의 메타 데이터에 더 많은 정보를 추가합니다.
// jsp code
<%@ page import="com.innorix.transfer.InnorixUpload" %>
<%
…
if (_action.equals("attachFileCompleted")){
uploader.setCustomValue("customValue", customValue);
}
Custom exception message
첨부 파일 정책 위반 시 오류 메시지를 변경합니다.
예) 제한된 크기를 초과하는 파일을 첨부하는 경우.
// html code
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
uploadURL: './upload.jsp'
boxConfig: box_config.combine_basic
});
box.on('addFileError', function (p) {
if(p.type == "allowExtension"){
p.message = customMessage;
}
});
};
</script>
When to use CORS
응답 및 요청 웹 페이지가 다른 도메인 주소를 사용하는 경우.
// jsp code
<%
…
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "Authorization,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type");
…
%>
Link with 3rd-party
"_action" 매개변수를 사용하여 DRM 및 바이러스 검사 등과 같은 타사 모듈과 연결합니다.
// jsp code
<%
…
if(_action.equals("attachFileComplete")){
// <Thirdparty connection>
}
%>
Process sessions
대용량 또는 대용량 파일과 같이 장시간 전송 시 더 긴 세션 시간을 유지합니다.
| Name |
setCookie() |
| Description |
웹 세션 정보를 유지합니다. |
| Return Type |
Nonevoid |
| Input parameter |
(String)
파일박스를 불러온 후 세션 정보를 유지하는 예제
box.on('loadComplete', function (p) {
box.setCookie("JSESSIONID=<%=session.getId()%>");
}…
|
// html code
<body>
<div id="fileBox"></div></br>
<input type="button" value="download" onclick="StartUpload();" />
</body>
<script>
var box = new Object();
window.onload = function() {
box = innorix.create({
el: '#fileBox',
uploadURL: './upload.jsp'
boxConfig: box_config.combine_basic
});
function StartUpload(){
box.setCookie("JSESSIONID=<%=session.getId()%>");
box.Upload();
};
};
</script>
한국어
