파일업로드_javascript

 

1. 라이브러리

<!-- 파일업로드_javascript -->
//다중 파일 클래스 [S]
var _cfu = null;

class CommonFileUpload { 
	constructor(prefix) { 
		this.file = prefix + "File"; 
		this.container = prefix + "Container"; 
		this.list = prefix + "List"; 
		this.layout = prefix + "Layout"; 
		this.deleteBtn = prefix + "DeleteBtn";
		this.modifyBtn = prefix + "ModifyBtn";
	}
}
//다중 파일 클래스 [E]

//다중 파일 초기화 [S]
function _common_file_upload_init(prefix) {
	
	_cfu = new CommonFileUpload(prefix);
	
	//파일 핸들러
	$("input[type=file][id="+_cfu.file+"]").off("change").on("change",_common_file_upload_handle);
	
}	
//다중 파일 초기화 [E]

//다중 파일 핸들러 [S]
function _common_file_upload_handle(e){
	
	console.log("_common_file_upload_handle");
	
	//이벤트 객체
	var obj = e.target;
	//이벤트 파일 객체
	var files = obj.files;
	//이벤트 파일 배열
	var filesArr = Array.prototype.slice.call(files);
	
	filesArr.forEach(function(f){

		var reader = new FileReader();
		reader.onload = function(e){
			
			//[공통]파일 업로드
			var fileName = _common_file_upload();
			
			//[공통]미리보기
			_common_file_upload_preview(e.target.result, fileName);
			
		}
		reader.readAsDataURL(f);
		
	});

}
//다중 파일 핸들러 [E]

//다중 파일 업로드 [S]
function _common_file_upload(name) {

	var fileName = "";
	var formData = new FormData();
	var inputName = (typeof name == "undefined" ? _cfu.file : name); 
	
	console.log("_common_file_upload");	
	
	// 등록 파일 객체 및 폼 네임 추가
	$('input[type="file"][name='+inputName+']').each(function (index, item) {	
		
		if ('files' in item) {
			
			for (var i = 0; i < item.files.length; i++) {
				
				console.log("item.files[i]", item.files[i]);
				
				formData.append("fileItems", item.files[i]);
				formData.append("fileForms", $(item).attr('name'));
				
			}
			
		}
		
	});	
	
	for (var pair of formData.entries()) {
    	console.log(pair[0]+ ', ' + pair[1]); 
	}

	$.ajax({
		type : "POST",
		url : "/common/upload",
		data : formData,
		dataType: "json",
		contentType : false,
		processData : false,
		async: false,
// 		beforeSend : function() {
// 			$.blockUI({
// 				css : {
// 					border : 'none',
// 					padding : '15px',
// 					backgroundColor : '#000',
// 					'-webkit-border-radius' : '10px',
// 					'-moz-border-radius' : '10px',
// 					opacity : .5,
// 					color : '#fff'
// 				}
// 			});
// 		},
		success : function(data, status, xhr) {
			
			if (data.result.code == '101') {
				
				//성공
				fileName = data.result.msg;
				console.log("success", data);
				
			} else {
				
				//실패
				console.log("error");
				
			}
		},
		error : function(xhr, status, error) { 
			
			//실패			
			console.log("code:"+xhr.status+"\n"+"message:"+xhr.responseText+"\n"+"error:"+error);
			
		},
		complete : function(xhr, status) {
			
// 			$.unblockUI();
			
		},
	});
	
	return fileName;
}
//다중 파일 업로드 [E]

//다중 파일 미리보기 [S]
function _common_file_upload_preview(url, fileName) {
	
	if(url == "") return;
	
	//이미지 미리보기 설정
	$("#"+_cfu.layout).find(".img_box").css({
		"background":"url("+url+")", 
		'background-size' : 'cover', 
		'background-repeat' : 'no-repeat', 
		'background-position':'center center'
	});
	
	// 레이아웃
	var layout = $("#"+_cfu.layout).html();
	
	// 미리보기 객체
	var preview = $("#"+_cfu.list);
	
	if($(preview).find("ul > li").hasClass("marked")) {
		
		//이미지 미리보기 교체
		$(preview).find("ul > li.marked").html(layout);
		
		//파일명
		$(preview).find("ul > li.marked").attr("data-file-name", fileName);
		
		//마크 삭제
		$(preview).find("ul > li.marked").removeClass("marked");

		
	} else {
	
		//이미지 미리보기 추가
		$(preview).find("ul").append("<li data-file-name='"+fileName+"'>"+layout+"</li>");
		
		//이미지 삭제 버튼 이벤트
		$(preview).find("button[name="+_cfu.deleteBtn+"]").off("click").on("click", _common_file_upload_delete);
		
		//이미지 수정 버튼 이벤트
		$(preview).find("button[name="+_cfu.modifyBtn+"]").off("click").on("click", _common_file_upload_edit);				
		
	}	
	
}
//다중 파일 미리보기 [E]

//다중 파일 삭제 액션 [S]
function _common_file_upload_delete(e) {
	
	var obj = e.target;
	
	//선택한 미리보기 객체 삭제
	$(this).closest("li").remove();
	
}
//다중 파일 삭제 액션 [E]

//다중 파일 수정 액션 [S]
function _common_file_upload_edit(e) {
	
	var obj = e.target;
	
	//선택한 미리보기 객체 마크
	$(this).closest("li").addClass("marked");
	
	//파일 객체 클릭
	$("input[type=file][name="+_cfu.file+"]").click();
	
}
//다중 파일 수정 액션 [E]

 

2. 단일 파일 업로드

function handleImgFileSelect(e){
    ....
    filesArr.forEach(function(f){
    ....
    var reader = new FileReader();
    reader.onload = function(e){
    ....
        //[공통]파일 업로드
        var fileAttachPath = _common_file_upload(name);
    }
}

 

3. 다중파일 업로드

추가 버튼 onclick 이벤트에 _common_file_upload_init('iconicPhoto') 같은 함수를 호출해 사용합니다

<!-- 대표사진 등록 -->
<div class="cp_rows non_required">
    <div class="section_box">
        <!-- 
            * 다중 파일 업로드 
            file           : (id)   iconicPhotoFile
            container      : (id)   iconicPhotoContainer
            list           : (id)   iconicPhotoList
            layout         : (id)   iconicPhotoLayout
            button(delete) : (name) iconicPhotoDeleteBtn
            button(modify) : (name) iconicPhotoModifyBtn
        -->                            
        <div class="section_title">
            <span class="tit">대표사진 등록</span>
            <div class="side_option">
                <div class="file_add">
                    <div class="img_box">
                        <!-- file -->
                        <input type="file" id="iconicPhotoFile" name="iconicPhotoFile" />
                        <form:hidden path="repImg" />
                    </div>
                    <label for="iconicPhotoFile" class="img_file multiful" onclick="_common_file_upload_init('iconicPhoto')"><span class="txts">추가하기</span></label>                                        
                </div>
            </div>
        </div>
        <div class="boxs_wrap">
            <!-- container -->
            <div id="iconicPhotoContainer" class="boxs profile_rep_img">
                <div class="img_desc">
                    <p class="txts">수업장면이나 전문성을 보여줄 수 있는 사진을 등록해주세요 (jpg, png, mp4만 가능. 최대 10개 등록 가능)</p>
                    <button class="btn_sample"><span>샘플보기</span></button>
                </div>
                <div class="img_add_list">
                    <!-- list -->
                    <div id="iconicPhotoList" class="img_list">                                            
                        <ul id="sortable"></ul>
                        <!-- layout -->
                        <div id="iconicPhotoLayout" style="display:none">
                            <div class="img_box">
                                <span class="label type03"><i class="sr_only">대표</i></span>
                                <button type="button" name="iconicPhotoDeleteBtn" class="btn_img_delete btn_delete"><span class="sr_only">사진 삭제</span></button>
                                <button type="button" name="iconicPhotoModifyBtn" class="btn_img_modify btn_edit"><span class="sr_only">사진 수정</span></button>
                            </div>                                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>    

<!-- 다중 파일 업로드 라이브러리 -->
<script type="text/javascript" src="/resources/di/js/common/common-file-upload.js"></script>