Paste the following code into the head section of your site’s HTML.
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-dialog/master/dist/ax5dialog.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-uploader/master/dist/ax5uploader.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-dialog/master/dist/ax5dialog.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-uploader/master/dist/ax5uploader.js"></script>
<script src="https://cdn.rawgit.com/thomasJang/jquery-direct/master/dist/jquery-direct.min.js"></script>
It is not easy to attach multi-file upload components with minimal changes to the existing page layout. ax5ui-uploader is designed to control the UI within the component by placing button, uploaded-box, etc. in the element with [data-ax5uploader] attribute. Other UI elements (uploaded-box, dropzone, etc.) can be declared as separate elements. If you need to define the UI element separately, you can configure the UI to express the upload status on a separate element by using onprogress instead of uploadedBox and dropZone keys in the setConfig method.
기존에 개발된 페이지 레이아웃의 변화를 최소화 하면서 멀티파일 업로드 컴포넌트를 붙이는 것은 쉽지 않은 일입니다. ax5ui-uploader에서는 [data-ax5uploader] 속성을 가진 엘리먼트 안에 button, uploaded-box 등 을 두어 콤포넌트 안에 UI를 제어 할 수 있게 설계 하였습니다. 버튼을 제외한 나머지 UI요소들(uploaded-box, dropzone등)은 사용자가 별도의 엘리먼트를 선언할 수 도 있습니다. UI요소를 별도로 정의해야 한다면 setConfig메소드에서 uploadedBox, dropZone의 키를 부여 하지 않고 onprogress등을 이용하여 별도의 엘리먼트에 업로드 상태를 표현하는 UI를 구성할 수 있습니다.
<div class="DH20"></div>
<div data-ax5uploader="upload1">
<button data-ax5uploader-button="selector" class="btn btn-primary">Select File (*/*)</button>
(Upload Max fileSize 20MB)
<div data-uploaded-box="upload1" data-ax5uploader-uploaded-box="inline"></div>
</div>
<div style="padding: 0;" data-btn-wrap>
<h3>control</h3>
<button class="btn btn-default" data-upload-btn="getUploadedFiles">getUploadedFiles</button>
<button class="btn btn-default" data-upload-btn="removeFileAll">removeFileAll</button>
</div>
<script type="text/javascript">
$(function () {
var API_SERVER = "http://api-demo.ax5.io";
var DIALOG = new ax5.ui.dialog({
title: "AX5UI"
});
var UPLOAD = new ax5.ui.uploader({
//debug: true,
target: $('[data-ax5uploader="upload1"]'),
form: {
action: API_SERVER + "/api/v1/ax5uploader",
fileName: "file"
},
multiple: true,
manualUpload: false,
progressBox: true,
progressBoxDirection: "left",
dropZone: {
target: $('[data-uploaded-box="upload1"]')
},
uploadedBox: {
target: $('[data-uploaded-box="upload1"]'),
icon: {
"download": '<i class="fa fa-download" aria-hidden="true"></i>',
"delete": '<i class="fa fa-minus-circle" aria-hidden="true"></i>'
},
columnKeys: {
name: "fileName",
type: "ext",
size: "fileSize",
uploadedName: "saveName",
uploadedPath: "",
downloadPath: "",
previewPath: "",
thumbnail: ""
},
lang: {
supportedHTML5_emptyListMsg: '<div class="text-center" style="padding-top: 30px;">Drop files here or click to upload.</div>',
emptyListMsg: '<div class="text-center" style="padding-top: 30px;">Empty of List.</div>'
},
onchange: function () {
},
onclick: function () {
// console.log(this.cellType);
var fileIndex = this.fileIndex;
var file = this.uploadedFiles[fileIndex];
switch (this.cellType) {
case "delete":
DIALOG.confirm({
title: "AX5UI",
msg: "Are you sure you want to delete it?"
}, function () {
if (this.key == "ok") {
$.ajax({
contentType: "application/json",
method: "post",
url: API_SERVER + "/api/v1/ax5uploader/delete",
data: JSON.stringify([{
id: file.id
}]),
success: function (res) {
if (res.error) {
alert(res.error.message);
return;
}
UPLOAD.removeFile(fileIndex);
}
});
}
});
break;
case "download":
if (file.download) {
location.href = API_SERVER + file.download;
}
break;
}
}
},
validateSelectedFiles: function () {
console.log(this);
// 10개 이상 업로드 되지 않도록 제한.
if (this.uploadedFiles.length + this.selectedFiles.length > 10) {
alert("You can not upload more than 10 files.");
return false;
}
return true;
},
onprogress: function () {
},
onuploaderror: function () {
console.log(this.error);
DIALOG.alert(this.error.message);
},
onuploaded: function () {
},
onuploadComplete: function () {
}
});
// 파일 목록 가져오기
$.ajax({
method: "GET",
url: API_SERVER + "/api/v1/ax5uploader",
success: function (res) {
console.log(res);
UPLOAD.setUploadedFiles(res);
}
});
// 컨트롤 버튼 이벤트 제어
$('[data-btn-wrap]').clickAttr(this, "data-upload-btn", {
"getUploadedFiles": function () {
var files = ax5.util.deepCopy(UPLOAD.uploadedFiles);
console.log(files);
DIALOG.alert(JSON.stringify(files));
},
"removeFileAll": function () {
DIALOG.confirm({
title: "AX5UI",
msg: "Are you sure you want to delete it?"
}, function () {
if (this.key == "ok") {
var deleteFiles = [];
UPLOAD.uploadedFiles.forEach(function (f) {
deleteFiles.push({id: f.id});
});
$.ajax({
contentType: "application/json",
method: "post",
url: API_SERVER + "/api/v1/ax5uploader/delete",
data: JSON.stringify(deleteFiles),
success: function (res) {
if (res.error) {
alert(res.error.message);
return;
}
UPLOAD.removeFileAll();
}
});
}
});
}
});
});
</script>
We have created a separate project AX5UI APIS for the UI components that can upload the files to the server and check whether the UI works.
You can check the actual code from https://github.com/ax5ui/apis
Among the APIs, the following APIs are related to file uploading.
The API is intended to handle only requests sent from ax5.io. Download the API test source and start the server.
'AX5UI' can be used with Bootstrap theme. The development of the distribution of the various UI plug-in. When you click the link to move to AX5UI index page.
AXBoot makes it easy to build web applications with Java & HTML5 Repeatable and noise development process are resolved by AXBoot.