/** * FineUploader class */ /** constructor */ function FineUploader() { //this.fineUploaderUI = new FineUploaderUI(this); this.detailmode = ""; this.eaFileMaxSize = 5242880; } /** Static Member */ FineUploader.getBytesFromMB = function (mb) { // mb: "14.951171875 MB" // 50 kB = 50 * 1024 bytes, 5MB = 5 * 1024 * 1024 bytes mb = 14.951171875; return mb * 1024 * 1024; }; // 메세지 닫기 FineUploader.onClickCloseMessage = function (e) { e.preventDefault(); var messageDiv = $(this).parent("div.qq-alert"); messageDiv.remove(); var setTimeoutId = messageDiv.data("setTimeoutId"); clearTimeout(setTimeoutId); }; // 진행상태 UI FineUploader.jQProgressContainer; FineUploader.setProgressUI = function (jQProgressItem, progressInfoObj) { var uploadedBytes = progressInfoObj.uploadedBytes; var totalBytes = progressInfoObj.totalBytes; var pct = Math.round((100 * uploadedBytes) / totalBytes); // var titleElement = jQProgressItem .children("div.qq-progress-item-title") .eq(0); var progressElement = jQProgressItem .children("div.qq-progress-item-progress") .eq(0); var progressBarElement = progressElement .children("div.qq-progress-item-progress-bar") .eq(0); progressBarElement.css("width", pct + "%"); titleElement.text(progressInfoObj.title); }; FineUploader.setStateProgress = function (progressEaInfoObj) { var jQProgressItem = FineUploader.jQProgressItemEa; // FineUploader.setProgressUI(jQProgressItem, progressEaInfoObj); }; FineUploader.setStateTotalProgress = function (progressTotalInfo) { var jQProgressItemTotal = FineUploader.jQProgressItemTotal; var progressInfoObj = { uploadedBytes: progressTotalInfo.totalUploadedBytes, totalBytes: progressTotalInfo.totalBytes, title: "전체", }; FineUploader.setProgressUI(jQProgressItemTotal, progressInfoObj); }; FineUploader.createProgressContainer = function () { var jQProgressContainer = $("
"); var jQProgressBox = $("
"); var jQProgressItemEa = $("
"); var jQProgressItemTitle = $( "
Title
" ); var jQProgressItemProgress = $( "
" ); var jqProgressItemProgressBar = $( "
" ); jQProgressItemProgress.append(jqProgressItemProgressBar); jQProgressItemEa.append(jQProgressItemTitle); jQProgressItemEa.append(jQProgressItemProgress); var jQProgressItemTotal = jQProgressItemEa.clone(true); jQProgressBox.append(jQProgressItemEa); jQProgressBox.append(jQProgressItemTotal); jQProgressContainer.append(jQProgressBox); FineUploader.jQProgressContainer = jQProgressContainer; FineUploader.jQProgressItemEa = jQProgressItemEa; FineUploader.jQProgressItemTotal = jQProgressItemTotal; }; FineUploader.appendProgressContainer = function () { $("body").append(FineUploader.jQProgressContainer); }; FineUploader.showProgressContainer = function () { FineUploader.jQProgressContainer.show(); }; FineUploader.hideProgressContainer = function () { FineUploader.jQProgressContainer.hide(); }; /** Instance Member */ // 상태 나타내기 FineUploader.prototype.displayState = function () { // var msg = ""; var qqUploadButton = $( "#" + this.fineUploaderElementId + " .qq-upload-button" ); var qqUploadDropArea = $( "#" + this.fineUploaderElementId + " .qq-upload-drop-area" ); // 파일찾기 버튼, 드랍존 상태 if (this.filesQueued >= this.canUpCnt) { qqUploadButton.hide(); qqUploadDropArea.hide(); } else { qqUploadButton.show(); qqUploadDropArea.show(); } // 파일 개수 상태 if (this.filesQueued < this.canUpCnt) { msg = "여기에 파일을 끌어다 놓으세요. (가능한 개수 " + this.canUpCnt + "개 중 " + this.filesQueued + "개 추가됨)"; } else if (this.filesQueued == this.canUpCnt) { msg = "추가 가능한 파일 개수가 꽉 찼습니다. (가능한 개수 " + this.canUpCnt + "개 중 " + this.filesQueued + "개 추가됨)"; } else { // this.filesQueued > this.canUpCnt - 에러 불가능 msg = "업로드 불가: 예상치 못한 오류"; } // $(".qq-uploader-selector").attr("qq-drop-area-text", msg); $("#" + this.fineUploaderElementId + " .qq-notice").text(msg); }; // 메세지 박스 추가해 보이기 FineUploader.prototype.showMessage = function (message, messageType) { // message: 메세지 // messageType: success, warning, error var messageDiv = $("
"); var messageSpan = $("" + message + ""); var messageCloseButton = $(""); messageCloseButton.click(FineUploader.onClickCloseMessage); messageDiv.append(messageSpan); messageDiv.append(messageCloseButton); $("#" + this.fineUploaderElementId + " .qq-controller-zone").after( messageDiv ); var cssClassType = messageType === undefined ? "error" : messageType; var cssClass = "qq-alert-" + cssClassType; messageDiv.addClass(cssClass); // 10초 뒤 메세지가 사라지도록 var setTimeoutId = setTimeout(function () { messageDiv.remove(); }, 10000); messageDiv.data("setTimeoutId", setTimeoutId); }; // 파일을 업로드할 서버 경로 지정 FineUploader.prototype.setEndpoint = function (endpoint) { this.endpoint = endpoint; }; // 글수정 모드시 서버로 부터 기존 업로드된 첨부파일 가져오기 FineUploader.prototype.getAttachedFilesFromServer = function () { // }; FineUploader.prototype.setItemLimit = function (itemLimitNum) { this.fineUploader.setItemLimit(itemLimitNum); }; FineUploader.prototype.getUploads = function () { return this.fineUploader.getUploads(); }; FineUploader.prototype.uploadStoredFiles = function () { //console.log("FineUploader class - uploadStoredFiles"); try { this.fineUploader.uploadStoredFiles(); } catch (error) { // NoFilesError } }; FineUploader.prototype.clearStoredFiles = function () { // Clears the internal list of stored items. Only applies when autoUpload is false this.fineUploader.clearStoredFiles(); }; // 수동 별도 업로드 버튼 FineUploader.prototype.onClickManualUploadExtraButton = function (e) { e.preventDefault(); this.uploadStoredFiles(); }; FineUploader.prototype.createManualUploadExtraButton = function () { this.onClickManualUploadExtraButton = this.onClickManualUploadExtraButton.bind( this ); var jQManualUploadExtraButton = $( "" ); jQManualUploadExtraButton.click(this.onClickManualUploadExtraButton); this.jQManualUploadExtraButton = jQManualUploadExtraButton; }; FineUploader.prototype.showManualUploadExtraButton = function () { if (!this.isAutoUpload) this.jQFineUploaderControllerZone.append(this.jQManualUploadExtraButton); }; FineUploader.prototype.hideManualUploadExtraButton = function () { if (this.jQManualUploadExtraButton) this.jQManualUploadExtraButton.hide(); }; // FineUploader.prototype.isUploadProgressing = false; // 초기화 setter FineUploader.prototype.setFineUploaderElementId = function ( fineUploaderElementId ) { var jQFineUploader = $("#" + fineUploaderElementId); jQFineUploader.css("position", "relative"); var jQFineUploaderControllerZone = $( "
" ); jQFineUploaderControllerZone.css({ position: "absolute", right: "20px", bottom: "10px", "z-index": "1", }); jQFineUploader.append(jQFineUploaderControllerZone); this.fineUploaderElementId = fineUploaderElementId; this.jQFineUploader = jQFineUploader; this.jQFineUploaderControllerZone = jQFineUploaderControllerZone; }; FineUploader.prototype.setCallObjectName = function (callObjectName) { this.callObjectName = callObjectName; }; FineUploader.prototype.setMaxUpCnt = function (maxUpCnt) { this.maxUpCnt = maxUpCnt; }; FineUploader.prototype.setMaxUpSize = function (maxUpSize) { this.maxUpSize = FineUploader.getBytesFromMB(maxUpSize); }; FineUploader.prototype.setEaFileMaxSize = function (eaFileMaxSize) { // this.eaFileMaxSize = FineUploader.getBytesFromMB(eaFileMaxSize); this.eaFileMaxSize = eaFileMaxSize; }; FineUploader.prototype.setIsAutoUpload = function (isAutoUpload) { //console.log(isAutoUpload); this.isAutoUpload = isAutoUpload; if (isAutoUpload) this.hideManualUploadExtraButton(); }; FineUploader.prototype.setPrevFile = function (prevFile) { this.prevFile = prevFile; }; FineUploader.prototype.setAllowUploadExt = function (allowUploadExt) { // allowUploadExt: xls,doc,hwp,pdf,ppt,xlsx,docx,pptx,jpg,gif,png,.. this.allowUploadExt = allowUploadExt; // var allowedExtSplit = allowUploadExt.split(";"); var l = allowedExtSplit.length; var acceptFiles = ""; var allowedExtensions = []; for (var i = 0; i < l; i++) { // acceptFiles = acceptFiles + ("." + allowedExtSplit[i]); acceptFiles = acceptFiles + allowedExtSplit[i].substr(1); if (i != l - 1) acceptFiles += ", "; // ".xls, .doc, .hwp, ..." allowedExtensions.push(allowedExtSplit[i].substr(2)); // ['xls', 'doc', 'hwp', ...] } this.acceptFiles = acceptFiles; this.allowedExtensions = allowedExtensions; }; FineUploader.prototype.setEndpoint = function (endpoint) { this.endpoint = endpoint + "?mode=file_upload" + this.detailmode; }; FineUploader.prototype.setInputName = function (inputName) { this.inputName = inputName; }; FineUploader.prototype.onCancelTimeout = null; FineUploader.prototype.uploadGenMulti = function (userFile, title, fileAttach) { var _this = this; _this.baseID = userFile; _this.setFineUploaderElementId(fileAttach); this.options = { // element: document.getElementById(_this.fineUploaderElementId), element: document.getElementById(fileAttach), request: { endpoint: _this.endpoint, inputName: "Filedata", params: { mode: "file_upload" }, uuidName: "SWFUpload", // uuidName: userFile, }, // deleteFile: { // enabled: true, // forceConfirm: true, // endpoint: "server/file", // }, multiple: true, validation: { acceptFiles: _this.acceptFiles, allowedExtensions: _this.allowedExtensions, // itemLimit: _this.maxUpCnt - _this.prevFile.length, itemLimit: _this.maxUpCnt, sizeLimit: _this.maxUpSize, }, autoUpload: _this.isAutoUpload, showMessage: function (message) { _this.showMessage(message); }, scaling: { defautQuality: 50, }, messages: { emptyError: "{file}은 내용이 비어있습니다, 다른 파일을 선택하세요.", maxHeightImageError: "Image is too tall.", maxWidthImageError: "Image is too wide.", minHeightImageError: "minHeightImageError", minWidthImageError: "Image is not wide enough.", minSizeError: "{file} is too small, minimum file size is {minSizeLimit}.", noFilesError: "업로드할 파일이 없습니다.", onLeave: "파일이 업로드 중이므로 지금 나가면 업로드가 취소됩니다.", retryFailTooManyItemsError: "Retry failed - you have reached your file limit.", sizeError: "{file}은 용량이 너무 큽니다, 최대 파일크기 {sizeLimit}.", tooManyItemsError: "업로드 파일을 ({netItems})개 지정했습니다. 첨부 파일은 {itemLimit}개 까지 가능합니다.", typeError: "{file}은 허용되지 않는 확장자입니다. 허용된 확장자(들): {extensions}.", unsupportedBrowserIos8Safari: "Unrecoverable error - this browser does not permit file uploading of any kind due to serious bugs in iOS8 Safari. Please use iOS8 Chrome until Apple fixes these issues.", }, failedUploadTextDisplay: { mode: "custom", maxChars: 40, responseProperty: "error", enableTooltip: true, }, debug: true, //button: $("#btn-open-file-explorer"), dragAndDrop: { //extraDropzones: [$("#file-drop-select-box")] }, callbacks: { onAutoRetry: function (id, name, attemptNumber) { // }, onCancel: function (id, name) { //console.log("FineUploader class onCancel"); //console.log("FineUploader class onCancel", id); //console.log( // "FineUploader class onCancel", // _this.fineUploader.totalFileSizeName // ); _this.filesQueued--; _this.displayState(); if (_this.onCancelTimeout) clearTimeout(_this.onCancelTimeout); _this.onCancelTimeout = setTimeout(function () { _this.refreshQueueState(); _this.cb.fileCheckedOverlab(); }, 1000); }, onComplete: function (id, name, responseJSON, xhr) { if (responseJSON.success) { // 개별 업로드 성공 var msg = name + "파일이 성공적으로 업로드 되었습니다."; _this.showMessage(msg, "success"); _this.filesQueued--; //console.log("onComplete filesQueued", _this.filesQueued); /** * @fileObj, @server_data * fileObj * server_data */ var f = _this.fineUploader.getFile(id); f.id = "SWFUpload_" + id; f.index = id; f.post = {}; // console.log("-----", responseJSON.file_name, name); _this.cb.uploadSuccess(f, responseJSON.file_name); // _this.cb.uploadSuccess(f, name); } else { // 개별 업로드 실패 } }, onAllComplete: function (succeeded, failed) { // Array succeeded - IDs of all files in the group that have uploaded successfully (status = qq.status.UPLOAD_SUCCESSFUL). // Array failed - IDs of all files in the group that have failed (status = qq.status.UPLOAD_FAILED). setTimeout(function () { //FineUploader.hideProgressContainer(); }, 3000); FineUploader.hideProgressContainer(); _this.fineUploader.clearStoredFiles(); _this.isUploadProgressing = false; _this.displayState(); // 2021.04.30 첨부파일 순서 대로 업로드 START try { var userFileReStrArr = new Array(); userFileRe = $("#user_file").val().split(","); succeeded.sort(); $.each( succeeded, function( k, v ) { var f = _this.fineUploader.getFile(v); fname = f.name; flen = fname.length; $.each( userFileRe, function( k1, v2 ) { var tText = v2.endsWith(fname) || false; if ( tText !== false) { userFileReStrArr.push(v2); } }); }); $("#user_file").val( userFileReStrArr.join(",") ); } catch(e) {} // 2021.04.30 첨부파일 순서 대로 업로드 END setTimeout(function () { _this.refreshQueueState(); _this.cb.fileCheckedOverlabReset(); }, 1000); }, onDelete: function (id) { // Called just before a delete request is sent for the associated item. Note that this is not the correct callback to influence the delete request. To do that, use the onSubmitDelete callback instead. //console.log("FineUploader onDelete"); }, onDeleteComplete: function (id, xhr, isError) { // Called just after receiving a response from the server for a delete file request. }, onError: function (id, name, errorReason, xhr) { //console.log( // "id: ", // id, // ", name: ", // name, // ", errorReason: ", // errorReason // ); }, onManualRetry: function (id, name) { // }, onPasteReceived: function (blob) { // Called when a pasted image has been received (before upload). }, onProgress: function (id, name, uploadedBytes, totalBytes) { // 개별 파일 업로드 진행 상태 var progressEaInfoObj = { uploadedBytes: uploadedBytes, totalBytes: totalBytes, title: name, }; FineUploader.setStateProgress(progressEaInfoObj); }, onResume: function (id, name, chunkData, customResumeData) { // }, onSessionRequestComplete: function (response, success, xhrOrXdr) { // }, onStatusChange: function (id, oldStatus, newStatus) { // }, onSubmit: function (id, name) { // _this.filesQueued++; // // //console.log(fineUploader.getFile(id)); // // setFineUploaderStateQueue(); // // if (fineUploaderQueueNum > fineUploaderItemLimit) { // // return false; // // } // var f = _this.fineUploader.getFile(id); // f.id = "SWFUpload_" + id; // f.index = id; // f.post = {}; // f.name = name; // _this.cb.fileQueued(f); // _this.displayState(); // if (_this.onCancelTimeout) clearTimeout(_this.onCancelTimeout); // _this.onCancelTimeout = setTimeout(function () { // _this.refreshQueueState(); // _this.cb.fileCheckedOverlab(); // }, 1000); }, onSubmitDelete: function (id) { //console.log("onSubmitDelete"); }, onSubmitted: function (id, name) { //_this.refreshQueueState(); _this.filesQueued++; // //console.log(fineUploader.getFile(id)); // setFineUploaderStateQueue(); // if (fineUploaderQueueNum > fineUploaderItemLimit) { // return false; // } var f = _this.fineUploader.getFile(id); f.id = "SWFUpload_" + id; f.index = id; f.post = {}; f.name = name; _this.cb.fileQueued(f); _this.displayState(); if (_this.onCancelTimeout) clearTimeout(_this.onCancelTimeout); _this.onCancelTimeout = setTimeout(function () { _this.refreshQueueState(); _this.cb.fileCheckedOverlab(); }, 1000); }, onTotalProgress: function (totalUploadedBytes, totalBytes) { // 전체 파일 업로드 진행 상태 var progressTotalInfo = { totalUploadedBytes: totalUploadedBytes, totalBytes: totalBytes, }; FineUploader.setStateTotalProgress(progressTotalInfo); }, onUpload: function (id, name) { FineUploader.showProgressContainer(); }, onUploadChunk: function (id, name, chunkData) { // }, onUploadChunkSuccess: function (id, chunkData, responseJSON, xhr) { // }, onValidate: function (data, buttonContainer) { // }, onValidateBatch: function (fileOrBlobDataArray, buttonContainer) { // }, }, // cors: { // //all requests are expected to be cross-domain requests // expected: true, // //if you want cookies to be sent along with the request // sendCredentials: true, // }, // text: { // uploadButton: "선택 또는 드롭", // }, }; _this.initFineUploader(); // UI 생성 //_this.createManualUploadExtraButton(); FineUploader.createProgressContainer(); FineUploader.appendProgressContainer(); FineUploader.hideProgressContainer(); }; FineUploader.prototype.initFineUploader = function () { // "user_file", "첨부파일", "file_attach" this.fineUploader = new qq.FineUploader(this.options); this.filesQueued = 0; this.canUpCnt = this.maxUpCnt; //this.maxUpCnt - this.prevFile.length; //console.log("this.canUpCnt", this.canUpCnt); this.displayState(); this.cb.fileUploadReady(); // 파인업로더 이전 버전의 파일 추가 박스 스타일 $("#" + this.fineUploaderElementId + "_flash_upload_div div.fud").css({ opacity: "0", height: "1px", overflow: "hidden !important", }); $("body").focus(); setTimeout(function () { $(".qq-notice").eq(0).focus(); }, 1000); // setTimeout(function () { // $("body").eq(0).trigger("click"); // }, 1000); }; FineUploader.prototype.refreshQueueState = function () { var multiCancelUpload = this.cb.cancelUpload; $("ul.qq-upload-list-selector") .eq(0) .children("li") .each(function (index, li) { var cancelButton = $(li).children(".qq-upload-cancel").eq(0); $(cancelButton).data("index", index); $(cancelButton).data("multiCancelUpload", multiCancelUpload); $(cancelButton).off("mousedown"); $(cancelButton).mousedown(function () { // //console.log("onMouseDownQueuedCancel", $(this).data("index"), "---"); var index = $(this).data("index"); var multiCancelUpload = $(this).data("multiCancelUpload"); multiCancelUpload(index); }); }); }; FineUploader.prototype.setCallbacks = function (callbacks) { this.cb = callbacks; }; FineUploader.prototype.setButtonDisabled = function (tf) { var qqUploadButton = $( "#" + this.fineUploaderElementId + " .qq-upload-button" ); var qqUploadDropArea = $( "#" + this.fineUploaderElementId + " .qq-upload-drop-area" ); if (tf) { qqUploadButton.hide(); } else { qqUploadButton.show(); } }; FineUploader.prototype.cancelUpload = function (fileObjId) { var id = fileObjId.substr(12); //console.log("id", id); this.fineUploader.cancel(id); }; FineUploader.prototype.startUpload = function () { this.isUploadProgressing = true; this.uploadStoredFiles(); }; FineUploader.prototype.getTotalBytes = function () { var queuedFiles = this.getUploads(); var l = queuedFiles.length; var file; var id, uuid, originalName, name, status, size; var totalSize = 0; for (var i = 0; i < l; i++) { file = queuedFiles[i]; size = file.size; status = file.status; if (status != "canceled") totalSize += size; } // var l2 = $("ul.qq-upload-list-selector").eq(0).children("li").length; if (l2 == 0) totalSize = 0; // return totalSize; }; FineUploader.prototype.getTotalKB = function () { var bytes = this.getTotalBytes(); var kb = bytes / 1024; kb = Math.floor((kb * 100) / 100); return kb; }; /** 서버 응답 메세지: 예 JSON - {"success": false, "error": "error message to display", "preventRetry": true} */ var fineUploaderItemLimit = 0; var fineUploaderSizeLimit = 0; var fineUploaderQueueNum = 0; function setFineUploaderStateLimit(limitNum) { fineUploader.setItemLimit(limitNum); fineUploaderItemLimit = limitNum; var limitText = ""; if (limitNum <= 0) { $("#" + this.fineUploaderElementId + " .qq-upload-button").hide(); $("#" + this.fineUploaderElementId + " .qq-upload-drop-area").hide(); limitText = "업로드 파일 개수가 꽉 찼습니다."; } else { $("#" + this.fineUploaderElementId + " .qq-upload-button").show(); $("#" + this.fineUploaderElementId + " .qq-upload-drop-area").show(); limitText = "여기에 파일을 끌어다 놓으세요. (" + limitNum + "개)까지 업로드 가능"; } $(".qq-uploader-selector").attr("qq-drop-area-text", limitText); } function setFineUploaderStateQueue() { fineUploaderQueueNum = fineUploader.getUploads().length; } // // Manually Trigger Uploads // $('#triggerUpload').click(function() { // manualuploader.fineUploader('uploadStoredFiles'); // }); // To call a method on Fine Uploader, refer to it's jQuery object: // var files = $("#fine-uploader").fineUploader('getStoredFiles'): // $("#cancel-button").click(function (event) { // // Trivial example to check if the 1st file registered with the uploader // var exists = $("#fine-uploader").fineUploader('doesExist', 0); // }); // try { // fineUploader.uploadStoredFiles(); // } // catch(error) { // // FineUploader의 NoFilesError // }S /** * FineUploaderUI class */ function FineUploaderUI(fineUploaderInstance) { this.fineUploaderInstance = fineUploaderInstance; }