276 lines
9.0 KiB
JavaScript
276 lines
9.0 KiB
JavaScript
$(document).ready(function () {
|
||
|
||
//$("#fileUpload").on("change", addFiles);
|
||
});
|
||
|
||
var filesTempArr = [];
|
||
|
||
//파일추가
|
||
function addFiles(event, mode){
|
||
addFilesObj(event, mode,"fileList");
|
||
}
|
||
|
||
function addFilesObj(event, mode, objId, represntAt){
|
||
if(!($(event.target).is('[multiple]'))) filesTempArr.splice(0, filesTempArr.length);
|
||
|
||
var files = event.target.files; //선택한 파일들
|
||
var filesArr = Array.prototype.slice.call(files); //file객체 array추가
|
||
var filesArrLen = filesArr.length;
|
||
var filesTempArrSize = filesTempArr.length*1;
|
||
|
||
let obj = $('#'+objId);
|
||
if((mode === 1 && filesArrLen>1) || (mode === 1 && obj.find('li').length>0)){
|
||
alert("파일은 한개만 첨부할 수 있습니다.");
|
||
return;
|
||
}
|
||
|
||
var templist = '';
|
||
for(var i=0; i<filesArrLen; i++){
|
||
if(i === filesArrLen-1){ //게시판 대표이미지 배열 첫번째로 이동
|
||
if(represntAt === 'Y'){
|
||
filesTempArr.unshift(filesArr[i]); //임시배열에 저장
|
||
}else{
|
||
filesTempArr.push(filesArr[i]); //임시배열에 저장
|
||
}
|
||
}else{
|
||
filesTempArr.push(filesArr[i]); //임시배열에 저장
|
||
}
|
||
if($(event.target).is('[multiple]')){
|
||
//templist = "<div id='temp"+(i+filesTempArrSize)+"'><a href='#' onclick='downloadFile(this, "+(i+filesTempArrSize)+");'>"+ filesArr[i].name + "</a><span style='color:red;' onclick='deleteFile(this, event, "+(i+filesTempArrSize)+");'> [X]</span></div>";
|
||
let fileSize = (filesArr[i].size / 1024).toFixed(2);
|
||
if(objId=='fileList'){
|
||
templist ="<li id='temp"+(i+filesTempArrSize)+"'>"
|
||
+"<a href='#' onclick='downloadFile(this, "+(i+filesTempArrSize)+");'>"
|
||
+ "<i class='icon icon_file-list mr-2'></i>"
|
||
+ "<span class='file-list__item-title'>"+ filesArr[i].name + "</span>"
|
||
+"</a>"
|
||
+"<button type='button' class='file-list__delete' onclick='deleteFile(this,0,0, "+(i+filesTempArrSize)+");'/>"
|
||
+"</li>";
|
||
}else {
|
||
templist = "<li class = 'uploadList__item' id='temp" + (i + filesTempArrSize) + "'>"
|
||
+ "<p class = 'uploadList__itemText'>"
|
||
+ "<span class = 'uploadList__itemName'/> "+ filesArr[i].name + "</span>"
|
||
+ "<span class ='uploadList__itemSize'>("+ fileSize + " KB)</span>"
|
||
+ "</p>"
|
||
+ "<input type = 'hidden' value = '"+ fileSize + "' class = 'filsSize'/>"
|
||
+ "<button class='uploadList__removeBtn' type='button' onclick='deleteFile(this,0,0," + (i+filesTempArrSize) + ",\"" + objId + "\"); fn_sum_file_size();'/>"
|
||
+ "<span class ='visually-hidden'>삭제</span>"
|
||
+ "</button>"
|
||
+ "</li>"
|
||
}
|
||
obj.append(templist);
|
||
}
|
||
}
|
||
}
|
||
|
||
//파일삭제
|
||
//callbackNm ajax 파일 처리 성공시 실행 할 콜백함수
|
||
function deleteFile(obj, shopCd, menuGb, orderParam,callbackNm,callbackParam) {
|
||
deleteFiles(obj, shopCd, menuGb, orderParam, 'fileUpload',callbackNm,callbackParam);
|
||
}
|
||
|
||
//파일삭제
|
||
function deleteFiles(obj, shopCd, menuGb, orderParam, objId, callbackNm,callbackParam) {
|
||
filesTempArr.splice(orderParam, 1);
|
||
var $div = $(obj).closest('li');
|
||
var $id = $div.attr('id');
|
||
var obj = "#" + objId;
|
||
if ($id.indexOf('temp') == 0) { //임시등록파일은 화면에서 삭제
|
||
$div.remove();
|
||
$(obj).val('');
|
||
} else { //업로드된 파일은 서버삭제
|
||
if (confirm("파일을 삭제하시겠습니까?")) {
|
||
ajaxFileDelete($div, $id, shopCd, menuGb, orderParam,callbackNm,callbackParam);
|
||
}
|
||
}
|
||
}
|
||
|
||
//파일삭제(html 요소 조작 없이 단순 파일 삭제)
|
||
function dropzoneDeleteFiles(fileId, shopCd, menuGb, orderParam,callbackNm,callbackParam) {
|
||
if (fileId.indexOf('temp') != 0) { //임시등록파일은 화면에서 삭제
|
||
if (confirm("파일을 삭제하시겠습니까?")) {
|
||
ajaxFileDelete('', fileId, shopCd, menuGb, orderParam, callbackNm,callbackParam);
|
||
return "Y";
|
||
}else{
|
||
return "N";
|
||
}
|
||
}
|
||
}
|
||
|
||
var ajaxFileDelete = function (obj, fileId, shopCd, menuGb, orderParam, callbackNm,callbackParam) {
|
||
|
||
$.ajax({
|
||
//url: '/file/deleteUploadedFile/'+shopCd+'/'+menuGb+'/'+fileId+'/ajax',
|
||
url: '/mngr/file/deleteUploadedFile?sopCd=' + shopCd + '&menuGb=' + menuGb + '&fileKey=' + fileId,
|
||
data: fileId,
|
||
type: 'get',
|
||
success: function (data) {
|
||
if (obj !== '') {
|
||
obj.remove();
|
||
}
|
||
if (callbackNm != null) {
|
||
callbackNm(callbackParam);
|
||
}
|
||
},
|
||
error: function () {
|
||
alert("삭제에 실패하였습니다.");
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
//다운로드
|
||
var downloadFile = function(obj,shopCd, menuGb,orderParam){
|
||
filesTempArr.splice(orderParam, 1);
|
||
var $div = $(obj).closest('li');
|
||
var fileId = $div.attr('id'); // <li>태그id - 파일글번호
|
||
var orgFileId = obj.id; //선택된 파일명. 즉 <a>태그id - 원본파일명
|
||
|
||
if(fileId.indexOf('temp') == 0){
|
||
alert("등록된 파일만 다운로드 가능합니다.");
|
||
return false;
|
||
}
|
||
|
||
//$(location).attr('href','/file/download/'+shopCd+'/'+menuGb+'/'+fileId+'/'+orgFileId+'/ajax');
|
||
//$(location).attr('href','/file/download/'+shopCd+'/'+menuGb+'/'+fileId+'/ajax');
|
||
$(location).attr('href','/mngr/file/fileDownload?sopCd='+shopCd+'&menuGb='+menuGb+'&fileKey='+fileId);
|
||
}
|
||
|
||
|
||
//다운로드
|
||
var linkDownloadFile = function(key,shopCd, menuGb,orderParam){ //파일글번호, 원본파일명
|
||
filesTempArr.splice(orderParam, 1);
|
||
|
||
if(key.indexOf('temp') == 0){
|
||
alert("등록된 파일만 다운로드 가능합니다.");
|
||
return false;
|
||
}
|
||
$(location).attr('href','/mngr/file/fileDownload?sopCd='+shopCd+'&menuGb='+menuGb+'&fileKey='+key);
|
||
}
|
||
|
||
|
||
|
||
//-----------------------------------------------------------
|
||
// 이미지 업로드 시 이미지 미리보기 , 삭제버튼(배열에서 제거함) 기능
|
||
//-----------------------------------------------------------
|
||
|
||
// let selectedFiles = []; // 선택된 파일을 저장하는 배열
|
||
function addImgFilesView(event,objId){
|
||
const previewContainer = document.getElementById(objId);
|
||
const files = event.target.files; // 선택된 파일들 가져오기
|
||
// previewContainer.innerHTML = ''; // 기존 미리보기 초기화
|
||
// filesTempArr = []; // 기존 배열 초기화
|
||
|
||
// 파일 개수 제한 확인
|
||
// const maxFiles = 3; // 최대 파일 개수 제한
|
||
/*if (filesTempArr.length + files.length > maxFiles) {
|
||
alert(`최대 ${maxFiles}개의 파일만 업로드할 수 있습니다.`);
|
||
return;
|
||
}
|
||
Array.from(files).forEach((file) => {
|
||
if (filesTempArr.length < maxFiles) {
|
||
filesTempArr.push(file); // 파일 추가
|
||
displayPreview(file, previewContainer);
|
||
}
|
||
});*/
|
||
Array.from(files).forEach((file) => {
|
||
filesTempArr.push(file); // 파일 추가
|
||
displayPreview(file, previewContainer);
|
||
});
|
||
|
||
// input 초기화 (같은 파일 재선택 가능)
|
||
event.target.value = '';
|
||
}
|
||
|
||
function displayPreview(file,obj) {
|
||
const reader = new FileReader();
|
||
|
||
reader.onload = function (e) {
|
||
// 미리보기 항목 생성
|
||
const previewItem = document.createElement('div');
|
||
previewItem.classList.add('preview-item');
|
||
|
||
// 이미지 태그 생성
|
||
const img = document.createElement('img');
|
||
img.src = e.target.result;
|
||
|
||
// 삭제 버튼 생성
|
||
const deleteBtn = document.createElement('button');
|
||
deleteBtn.classList.add('delete-btn');
|
||
deleteBtn.textContent = '×';
|
||
deleteBtn.onclick = function () {
|
||
removeImgFile(file, previewItem);
|
||
};
|
||
|
||
// 미리보기 항목에 이미지와 버튼 추가
|
||
previewItem.appendChild(img);
|
||
previewItem.appendChild(deleteBtn);
|
||
obj.appendChild(previewItem);
|
||
};
|
||
|
||
reader.readAsDataURL(file);
|
||
}
|
||
|
||
function removeImgFile(file, previewItem) {
|
||
// 선택된 파일 배열에서 제거
|
||
filesTempArr = filesTempArr.filter((f) => f !== file);
|
||
|
||
// 미리보기 항목 제거
|
||
previewItem.remove();
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
//-------------------------------------------------------------------------------------------
|
||
var initFileList = function($files){
|
||
if(Array.isArray($files)){
|
||
$.each($files, function(index, item){
|
||
filesTempArr.push(item);
|
||
filesTempArr[index].upload = 'disable';
|
||
});
|
||
}else{
|
||
filesTempArr.push(new File([$files], $files+".txt", {
|
||
type: "text/plain",
|
||
}));
|
||
filesTempArr[0].upload = 'disable';
|
||
}
|
||
}
|
||
|
||
|
||
//파일삭제(단건)
|
||
function deleteSingleFile (obj, eventParam, orderParam){
|
||
if(confirm('삭제하시겠습니까?')){
|
||
filesTempArr.splice(orderParam, 1);
|
||
var $div = $(obj).closest('div')
|
||
var $id = $div.attr('id');
|
||
if($id.indexOf('temp') == 0) {
|
||
$div.remove();
|
||
}else{
|
||
$div.remove();
|
||
|
||
$('#updateFileDiv').show();
|
||
filesTempArr = [];
|
||
$('#imgSavedYn').val("N");
|
||
//ajaxSingleFileDelete($id);
|
||
}
|
||
}
|
||
}
|
||
//파일삭제(단건) 후처리
|
||
var ajaxSingleFileDelete = function(fileId){
|
||
$.ajax({
|
||
url: '/mngr/file/deleteUploadedFile/'+fileId+"/ajax",
|
||
data: fileId,
|
||
type: 'post',
|
||
success : function(data){
|
||
//찾아보기 div구역 id = updateFileDiv
|
||
$('#updateFileDiv').show();
|
||
filesTempArr = [];
|
||
},
|
||
error: function(xhr, status, error){
|
||
alert("삭제에 실패하였습니다.");
|
||
}
|
||
});
|
||
}
|