Simplify.js

var nBizfileLoader;

(function($) {
	$(document).ready(function(){
    
		var getUploadOption = function(files){ 
			var result = {
				max_file_size : "100mb" ,
				addedCallback :checkFileOn,
				filters : [ {title : "*.*", extensions : "asc,txt,text,diff,log,htm,html,xhtml,rtf,xml,vcf,csv,bmp,gif,jpeg,jpg,png,tiff,tif,zip,alz,rar,jar,tar,bat,doc,dot,pdf,pgp,ps,ai,eps,rtf,xls,xlb,ppt,pps,pot,docx,pptx,xlsx,hwp,wav,wma,mpga,mpega,mp2,mp3,m4a,avi,mkv,mpeg,mpg,mpe,qt,mov,mp4,m4v,flv,rv,swf,swfl,com,exe"}]
			};
			
			if(files)result.files = files;
			
			return result;
		};
		
		function checkFileOn(btn,file){
			var $parent = $(btn).parents('td.sender-file:eq(0)'),
				filename = file.name;
			
			if(filename){
				$parent.find('.sender-file-name').text(filename);
				$parent.find('div.file').show();
			}else{
				$parent.find('.sender-file-name').val('');
				$parent.find('div.file').hide();
			}
		}
		
		
			
		validationCheck(sender,function(){

				var bizfileLoader = nBizfileLoader;
				var bizloaderFn, certloaderFn;


				//prev파일도 없고 안이 비어있는 경우
				//파일이 있으면 가져오고 없으면 prev체크 // prev도 없으면 error
				bizloaderFn = function(callback){
					if(bizfileLoader.getFiles().length > 0 ){
						bizfileLoader.upload(function(bizfileSuccess, bizfileInfo) {
							if(bizfileSuccess && bizfileInfo != null ){
								sender.bizfileId = bizfileInfo.fileId;
							}
							callback();
						});
					}else{
						callback();
					}
				};

		})//end validation check callback

			
		(function(){//init
			nBizfileLoader = new spro.SingleFileController("#newSenderForm", "#nBizfileBtn", getUploadOption());
		})();
	});
	
})(jQuery);
</script>


<td class="sender-file">
    <div class="file" style="display:none;"><i class="icon attach"></i><span class="sender-file-name"></span></div>
    <input type="hidden" class="singleFile">
    <button type="button" id="nBizfileBtn" class="btn s2 btn-color7 br"><spring:message code="message.common.service.sms.label.regist" /></button>
  </td>

upload.controll.js

spro.SingleFileController = function(container, button, options) {
		var uploadResult = null;
		var $container = $(container), $button = $(button);
		var $input = $button.siblings("input.singleFile")
						.attr("readonly", true)
						.val(langPLUpload.initializing);

		var autoUpload = (options && options.autoUpload) || false;
		options && options.autoUpload && (options.autoUpload = undefined);	// 초기화
		
		var uploadedCallback = (options && options.callback) || undefined;
		options && options.callback && (options.callback = undefined);	// 초기화

	
	
	
	
	
	
	
	
######################이부분	
		var addedCallback = (options && options.addedCallback) || undefined;
		options && options.addedCallback && (options.addedCallback = undefined);	// 초기화
######################이부분	











		if(options.isImageOnly) {
			if(options.filters == undefined){
				options.filters = [
	   				{title : "Image files", extensions : "jpg,gif,png"}              
	   			];
			}
		} else {
			options.filters = [
			    {type:"all", title:langUpload.filter.all, extensions:"asc,txt,text,diff,log,htm,html,xhtml,rtf,xml,vcf,csv,bmp,gif,jpeg,jpg,png,tiff,tif,zip,alz,rar,jar,tar,bat,doc,dot,pdf,pgp,ps,ai,eps,rtf,xls,xlb,ppt,pps,pot,docx,pptx,ppsx,xlsx,hwp,dwg,dws,dxf,dwt,plt,wav,wma,mpga,mpega,mp2,mp3,m4a,avi,mkv,mpeg,mpg,mpe,qt,mov,mp4,m4v,flv,rv,swf,swfl,com,exe"},
				{type:"txt", title:langUpload.filter.txt, extensions:"asc,txt,text,diff,log,htm,html,xhtml,rtf,xml,vcf,csv"},	// text
				{type:"img", title:langUpload.filter.img, extensions:"bmp,gif,jpeg,jpg,png,tiff,tif"},	//images
				{type:"comp", title:langUpload.filter.comp, extensions:"zip,alz,rar,jar,tar,bat"},	//compress
				{type:"doc", title:langUpload.filter.doc, extensions:"doc,dot,pdf,pgp,ps,ai,eps,rtf,xls,xlb,ppt,pps,pot,docx,pptx,ppsx,xlsx,hwp,dwg,dws,dxf,dwt,plt"},	// document
				{type:"ado", title:langUpload.filter.mp, extensions:"wav,wma,mpga,mpega,mp2,mp3,m4a"},		//audio
				{type:"vod", title:langUpload.filter.vod, extensions:"avi,mkv,mpeg,mpg,mpe,qt,mov,mp4,m4v,flv,rv,swf,swfl"},	//video
				{type:"app", title:langUpload.filter.app, extensions:"com,exe"}	// application
				//{type:"all", title:langUpload.filter.all, extensions:"*"}	// all
			];
		}
		
		// 서버단에서 업로드된 파일의 서비스 구분을 위해...
        if(options.multipart_params) {
        	if(!options.multipart_params.actionUrl)
        		options.multipart_params.actionUrl = location.pathname;
        } else {
        	options.multipart_params = {actionUrl:location.pathname};
        }
		
		var uploader = new plupload.Uploader($.extend({
			runtimes : "html5,flash",//,silverlight,html4
			browse_button : $button.attr("id"),
			container : $container.attr("id"),
			url : spro.getContextRoot()+spro.config.uploader.uploadUrl,
			flash_swf_url : spro.getContextRoot()+"/js/plupload-2.1.8/js/Moxie.swf",
			silverlight_xap_url : spro.getContextRoot()+"/js/plupload-2.1.8/js/Moxie.xap",
			max_file_size : "1mb",
			filters : [
				{title : "Image files", extensions : "jpg,gif,png"}              
			],
			resize : spro.config.uploader.imageSize || {width : 600, height : 1000, quality : 90},
			multi_selection : false,
			multipart : true,
			preinit : {
				Init : function() {
					reset();
				}
			},
			init : {
				FilesAdded : function(up, files) {
					var file = files[files.length-1];	// 단일 파일만 선택되도록 함.
					
					for(var i=up.files.length-1; i>=0; i--) {	// 선택된 파일만 남기고 모두 삭제
						if(up.files[i].id != file.id) up.removeFile(up.files[i]);
					}
					
					
					
					
					
					
					
					
					
					
					
					
######################이부분######################이부분######################이부분					
					uploadResult = "ready";
					if(autoUpload) {
						$container.loading();
						up.start();
					} else {
						$input.css("color", "").val(file.name);
						addedCallback && addedCallback(button,file);
					}
######################이부분######################이부분######################이부분######################이부분








				},
				Error : function(up, err) {
					var file = err.file;
					switch(err.code) {
	        			case plupload.IMAGE_FORMAT_ERROR :
	        				alert(langUpload.errImageFile);
	        				break;
	        			case plupload.FILE_SIZE_ERROR :
	        				var maxSize = up.settings.max_file_size;
	        				if(maxSize >= 1048576) maxSize = Math.floor(maxSize/1048576) + "Mbyte";
	        				else if(maxSize >= 1024) maxSize = Math.floor(maxSize/1024) + "Kbyte";
	        				
	        				alert(langUpload.errMaxFileSize.replace("%w", maxSize));
	        				break;
	        			case plupload.FILE_EXTENSION_ERROR :
	        				alert(plupload.translate("Error: Invalid file extension:") + "\n\n" + file.name);
	        				break;
	        			default :
	        				alert(langUpload.errGeneric);
	        		}
	
					uploadResult = null;
				},
				FileUploaded : function(up, file, xhr) {
		    		var json = $.parseJSON(xhr.response);
		    		if(json["status"] == "success") {
		        		uploadResult = json;
		    		} else {
		    			throw new Exception("upload error");
		    		}
				},
				UploadComplete : function(up, files) {
					var file = files[0];
					if(file.status == plupload.DONE) {
						if(uploadResult && uploadResult["status"] == "success") {
							uploadedCallback && uploadedCallback(true, {
			        			fileId:uploadResult.fileId,
			        			name:uploadResult.fileRealName,
			        			size:Number(uploadResult.fileSize),
			        			type:uploadResult.fileExtension,
			        			flag:"add",
			        			path : uploadResult.filePath	// with profile image upload
			        		});
							
							if(autoUpload)
								$input.css("color", "").val(uploadResult.fileRealName);
						} else {
							uploadedCallback && uploadedCallback(false, uploadResult.message);
						}
					}
					
					up.refresh();
					
					if(autoUpload) $container.loaded();
				}
			}
		}, options||{}));
		
		setTimeout(function() {uploader.init();}, 10);
		
		function reset() {
			$input.css("color", "#999")
				.val(langPLUpload.caption);
		}
		
		this.getUploader = function() { return uploader; };
		this.getFiles = function() { return uploader.files; };
		this.reset = function() {
			uploader.refresh();
			reset();
		};
		this.upload = function(callback) {
			if(callback)
				uploadedCallback = callback;
			
			if(uploader.files.length > 0) {
				uploader.start();
			} else {
				uploadedCallback && uploadedCallback(true, null);
			}
		};
	};
	

usingSingleFilecontroller.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<jsp:include page="/common/javascriptImport.jsp" flush="false">
	<jsp:param name="module" value="fileupload"/>
</jsp:include>
<c:set var="prefix" value="message.common"/>
<c:set var="apYn" value="${sessionScope['spro.apYn']}" />
<c:set var="tenantId" value="${sessionScope['spro.tenantId']}" />
<script type="text/javascript">
var loaderArr, nBizfileLoader, nCertfileLoader, oBizfileLoader, oCertfileLoader, timerInterval;
(function($) {
	$(document).ready(function(){
		var getUploadOption = function(files){ 
			var result = {
				max_file_size : "100mb" ,
				addedCallback :checkFileOn,
				filters : [ {title : "*.*", extensions : "asc,txt,text,diff,log,htm,html,xhtml,rtf,xml,vcf,csv,bmp,gif,jpeg,jpg,png,tiff,tif,zip,alz,rar,jar,tar,bat,doc,dot,pdf,pgp,ps,ai,eps,rtf,xls,xlb,ppt,pps,pot,docx,pptx,xlsx,hwp,wav,wma,mpga,mpega,mp2,mp3,m4a,avi,mkv,mpeg,mpg,mpe,qt,mov,mp4,m4v,flv,rv,swf,swfl,com,exe"}]
			};
			
			if(files)result.files = files;
			
			return result;
		};
		
		$('#newSenderForm .submitSender').click(function(e){
			var sender = { phoneNumber:'', phoneType:'', numberToDelete:null};
			
			e.preventDefault();
			
			sender.phoneNumber = getSenderNumber();
			sender.phoneType = (function(){
				var $activeTab = $('.tab-pane.active input[name=type]');
				
				if($activeTab.length > 0){
					return $activeTab.val();
				}
			})();
			sender.numberToDelete = $('input[name=numberToDelete]').val();
			
			validationCheck(sender,function(){
				if(sender.phoneType == 0){ /** 발신번호 유형 0:휴대번호 1: 일반번호 2:전국대표번호 */
					var val = $('input[name=authNumber]').val();
				
					if(val){
						sender.authNumber = val;
						sendRequest();
					}else{
						alert('<spring:message code="message.common.service.sms.alert.01" />');
					}
				}else{
					var bizfileLoader = (sender.phoneType == 1) ?  nBizfileLoader : oBizfileLoader;
					var certfileLoader = (sender.phoneType == 1) ?  nCertfileLoader : oCertfileLoader;
					var numberToDelete = $('input[name=numberToDelete]').val();
					var prevBizfileId = $('input[name=prevBizfileId]').val();
					var prevCertfileId = $('input[name=prevCertfileId]').val();
					var bizloaderFn, certloaderFn;
					
					if(numberToDelete){
						sender.numberToDelete =numberToDelete;
						sender.bizfileId 	  =prevBizfileId;
						sender.certfileId	  =prevCertfileId;
					}
					
					//prev파일도 없고 안이 비어있는 경우
					//파일이 있으면 가져오고 없으면 prev체크 // prev도 없으면 error
					bizloaderFn = function(callback){
						if(bizfileLoader.getFiles().length > 0 ){
							bizfileLoader.upload(function(bizfileSuccess, bizfileInfo) {
								if(bizfileSuccess && bizfileInfo != null ){
									sender.bizfileId = bizfileInfo.fileId;
								}
								callback();
							});
						}else{
							callback();
						}
					};
					
					certloaderFn = function(callback){
						if(certfileLoader.getFiles().length > 0 ){
							certfileLoader.upload(function(certfileSuccess, certfileInfo) {
								if(certfileSuccess && certfileInfo != null ){
									sender.certfileId = certfileInfo.fileId;
								}
								callback();
							});
						}else{
							callback();
						}
					};
					
					bizloaderFn(function(){
						certloaderFn(function(){
							if(sender.bizfileId && sender.certfileId){
								sendRequest();
							}else{
								alert('<spring:message code="message.common.service.sms.alert.02" />');
							}
						})
					});
				}//end else
				
			})//end validation check callback

			function sendRequest(){
				$.ajax({
					url: "<c:url value='/service/sms/manageSenderNumber.do'/>",
					type: 'post',
					data: sender,
					success: function(response){
						if(response == 'SUCCESS'){
							alert('<spring:message code="message.common.service.sms.alert.03" />');
							fetchSenderList();
							resetInputs();
						}else if(response == 'DUPLICATE'){
							alert('<spring:message code="message.common.service.sms.alert.04" />');
						}else if(response == 'WRONG'){
							alert('<spring:message code="message.common.service.sms.alert.05" />');
							cleanAuthNumberInput();
						}else{
							alert('<spring:message code="message.common.service.sms.alert.06" />');
						}
					}
				})//end ajax
			}
			
		});
		
		function validationCheck(sender,callback){
			var isValid = false;
			
			if(!sender.phoneNumber){
				alert('<spring:message code="message.common.service.sms.alert.07" />');
				return false;
			}
			
			//10개이상 금지
			if($('.tdSenderUnit').length >= 10){
				alert('<spring:message code="message.common.service.sms.alert.08" />');
				return false;
			};
			
			//수정시 같은 번호일 경우 중복체크를 하지 않음
			if(sender.phoneNumber && sender.phoneNumber == sender.numberToDelete){
				callback();
			}else{
				checkRegisteredSender(sender,function(response){
					if(response == 'TRUE'){
						alert('<spring:message code="message.common.service.sms.alert.09" />');
						return false;
					}else{
						callback();
					}
				});
			}
		}
		
		//이미 등록된것인지 여부
		function checkRegisteredSender(data,callback){
			$.ajax({
				url: "<c:url value='/service/sms/isRegisteredSender.do'/>",
				type: 'post',
				data: data,
				success: callback
			})//end ajax
		}
		
		$('#newSenderForm').on('click','.tab-pane.active .requestAuthNumber',function(){
			var requestNumber = getSenderNumber();
			
			if(requestNumber){
				checkRegisteredSender({phoneNumber:requestNumber},function(response){
					if(response == 'TRUE'){
						alert('<spring:message code="message.common.service.sms.alert.09" />');
						return false;
					}else{
						var number = requestNumber.replaceAll('-','');
						
						$.ajax({
							url: "<c:url value='/service/sms/requestAuthNumber.do'/>",
							type: 'post',
							data: {phoneNumber : number},
							success: function(response2){
								if( response2 == 'OK'){
									var countdown =  2 * 60 * 1000, <%-- //밀리초 단위  --%>
										display = document.getElementById('countDown');
										
									alert('<spring:message code="message.common.service.sms.alert.10" />');
									cleanAuthNumberInput();
							    	startTimer(countdown, display);
								}else{
									alert('<spring:message code="message.common.service.sms.alert.07" />');
								}
							}
						})//end ajax
					}
				})
			}else{
				alert('<spring:message code="message.common.service.sms.alert.07" />');
			}
			
		});
		
		function getSenderNumber(){
			var senderNumber = '';
			var valid = true;
			
			$('.tab-pane.active input[name="phoneNumber[]"]').each(function(index,item){
				if(!item.value || isNaN(item.value)){
					valid = false;
					return false;
				}else{
					if(index != 0) senderNumber += '-';
					senderNumber += item.value;
				}
			});
			
			return valid ? senderNumber : undefined;
		}
		
		function fetchSenderList(){
			var btns = {
				update : function(ph,type){
					return '<button type="button" data-ph="'+ph+'" data-type="'+type+'" class="btn s2 btn-color7 br mr3 setUpdateForm">수정</button>'
				},
				remove : function(ph){
					return '<button type="button" data-ph="'+ph+'" class="btn s2 btn-color7 br deleteSender">삭제</button>';
				}
			};
						
			$.ajax({
				url: "<c:url value='/service/sms/senderList.do'/>",
				type: 'get',
				success: function(data){
					var jsonArr = JSON.parse(data),
						len = (jsonArr.length%2 == 0) ? jsonArr.length : jsonArr.length+1;
						html = '';
					
					for(var i =0; i < len; i++){
						var item = jsonArr[i];
						
						if(i%2 == 0)html += '<tr>';
						if(jsonArr[i]){
							html += '<td class="tdSenderUnit">'+(i+1)+"</td><td>"+item.ph+"</td>";
							if(item.systemInput == 1){
								html += '<td><spring:message code="message.common.service.sms.label.approved" /></td><td></td>';
							}else if(0 <= item.status <= 2){
								if(item.status == 0)html += '<td><spring:message code="message.common.service.sms.label.request" /></td><td>'+btns.update(item.ph,item.type) + btns.remove(item.ph) +"</td>";
								if(item.status == 1)html += '<td><spring:message code="message.common.service.sms.label.approved" /></td><td>'+ btns.remove(item.ph) +"</td>";
								if(item.status == 2)html += '<td class="showRejectReason" data-ph="'+item.ph+'"><spring:message code="message.common.service.sms.label.rejected" /></td><td>'+ btns.remove(item.ph) +"</td>";
							}else html += "<td></td><td></td>";
						}else html += "<td></td><td></td><td></td><td></td>";
						if(i%2 == 1)html += "</tr>";
						
					}
					$('#senderList').html(html);
				}
			})//end ajax
		}
		
		cleanAuthNumberInput = function(){
			$('input[name=authNumber]').val('');
			$('input[name=authNumber]').focus();
		}
		
		function checkFileOn(btn,file){
			var $parent = $(btn).parents('td.sender-file:eq(0)'),
				filename = file.name;
			
			if(filename){
				$parent.find('.sender-file-name').text(filename);
				$parent.find('div.file').show();
			}else{
				$parent.find('.sender-file-name').val('');
				$parent.find('div.file').hide();
			}
		}
		
		$("#tele-biz-act").click(function() {
			spro.showModalFrame(
					"<c:url value='/service/sms/teleBizActPopup.do'/>", null, function(result) {}, 
					options={title:'<spring:message code="message.common.service.sms.label.msg01" />)',width:650,height:370} // <spring:message code="message.common.service.sms.msg23" />
				); 
		});
		
		$('.guideCertBtn').click(function(){
			var url = "<c:url value='/service/sms/guideCertPopup.do'/>";
			var options =  {width:700, height:805};
			spro.popupOpen( url , options,"Certificate_Guideline");
		});
		
		function resetInputs(){
			var $form = $('#newSenderForm');
			
			$form.find('input[type=text],input.singleFile,input[name=numberToDelete]').each(function(){
				$(this).val('');
			});
			$form.find('.sender-file-name').each(function(){
				$(this).text('');
			});
			$form.find('div.file').each(function(){
				$(this).hide();
			});
			
			loaderArr.forEach(function(a){a.reset();});
			
			clearInterval(timerInterval);
            $('#countDown').html('');
		}
		
		$('.resetBtn').click(resetInputs);
		$('.nav a[data-toggle=tab]').on('shown.bs.tab', resetInputs);
		
		$('#senderList').on('click','button.deleteSender',function(){
			var ph = $(this).data('ph');
			
			if(confirm('['+ph+'] <spring:message code="message.common.service.sms.alert.11" />')){
				$.ajax({
					url: "<c:url value='/service/sms/deleteSender.do'/>",
					type: 'post',
					data: {numberToDelete : ph},
					success: function(response){
						if( response == 'OK'){
							alert('<spring:message code="message.common.service.sms.alert.12" />');
							fetchSenderList();
							resetInputs();
						}else{
							alert('<spring:message code="message.common.service.sms.alert.13" />');
						}
					}
				})//end ajax
			}
		});//end deleteSender
		
		$('#senderList').on('click','button.setUpdateForm',function(){
			var sender = {phoneNumber:''},
				type = $(this).data('type');
			
			sender.phoneNumber = $(this).data('ph');
			
			//ajax로 fileId,fileName 가져와서 show()
			//input[numbertoDelete]와 input[name=phoneNumber[]]에 prev전화번호 넣기
			$.ajax({
				url: "<c:url value='/service/sms/readSenderRequest.do'/>",
				type: 'post',
				data: sender,
				success: function(senderRequest){
					var obj = JSON.parse(senderRequest),
						$container = $('.tab-content .tab-pane:eq('+type+')'),
						phArr = [],
						bizfileData, certfileData;
					
		 			bizfileData = JSON.parse(obj.bizfileData);
		 			certfileData = JSON.parse(obj.certfileData);
		 			
		 			$('.nav a[data-toggle=tab]:eq('+type+')').click();//탭 클릭 + reset
		 			phArr = obj.phoneNumber.split("-");
		 			
		 			$('input[name=numberToDelete]').val(obj.phoneNumber);
		 			$container.find('input[name="phoneNumber[]"]').each(function(i,v){
		 				$(this).val(phArr[i]);
		 			});
					
					$container.find('.sender-file-name').each(function(i,v){
						var obj,fileName;
						
						if(i==0){
							obj = bizfileData;
							$('input[name=prevBizfileId]').val(obj.fileId);
							fileName = obj.name;
						}else{
							obj = certfileData;
							$('input[name=prevCertfileId]').val(obj.fileId);
							fileName = obj.name;
						}
						
						$(v).click(function(){
							var url = "<c:url value='/support/fileupload/downloadFile.do?fileId=' />";
							location.href= url + obj.fileId;
						});

						if(v.style) v.style.cursor = 'pointer';
						
						$container.find('.sender-file-name:eq('+i+')').text(fileName);
		 				$container.find('div.file:eq('+i+')').show();
					});		 			
		 			
				}
			})//end ajax
			
		});//end setUpdateForm
		
		$('#senderList').on('click','.showRejectReason',function(){
			var phoneNumber = $(this).data('ph');
			
			spro.showModalFrame(
					"<c:url value='/service/sms/showRejectReasonPopup.do'/>?phoneNumber="+phoneNumber, null, function(result) {}, 
					options={title:"<spring:message code="message.common.service.sms.label.rejectedReason" />",width:360,height:120}
				); 
		});
		
		<%-- 타이머 구현 --%>
		function startTimer(countdown, display) {
		    var timer   = countdown/1000,
		    	minutes, seconds;
		    
		    clearInterval(timerInterval);
		    timerInterval = setInterval(function () {
		        minutes = parseInt(timer / 60, 10);
		        seconds = parseInt(timer % 60, 10);
		
		        minutes = minutes < 10 ? "0" + minutes : minutes;
		        seconds = seconds < 10 ? "0" + seconds : seconds;
		
		        display.textContent = minutes + ":" + seconds;
		
		        if (--timer < 0) {
		            timer = 0;
		            clearInterval(timerInterval);
		            alert("인증번호 시간이 초과되었습니다.");
		            $('#countDown').html('');
		        }
		    }, 1000);
		}
		
		(function(){//init
			nBizfileLoader = new spro.SingleFileController("#newSenderForm", "#nBizfileBtn", getUploadOption());
			nCertfileLoader = new spro.SingleFileController("#newSenderForm", "#nCertfileBtn", getUploadOption());
			oBizfileLoader = new spro.SingleFileController("#newSenderForm", "#oBizfileBtn", getUploadOption());
			oCertfileLoader = new spro.SingleFileController("#newSenderForm", "#oCertfileBtn", getUploadOption());
			loaderArr = [nBizfileLoader,nCertfileLoader,oBizfileLoader,oCertfileLoader];
			
			fetchSenderList();
		})();
	});
	
})(jQuery);
</script>
<style>
#senderList .showRejectReason{color: red;cursor: pointer;}
#newSenderForm .moxie-shim {display:none;}
#newSenderForm .sender-file .file{display:inline;margin-right:5px;}
#newSenderForm .sender-file .file i.icon{margin-right:1px;}
#newSenderForm .tab-content{min-height:260px;}
#countDown {margin-left:8px;color:red;}
</style>
<div class="con-header bdr-b">
	<h2><spring:message code="message.common.service.sms.label.smsSender.regist" /></h2>
</div>
<div class="ins-box">
	<ul>
		<li><i class="fa fa-exclamation-circle"></i>&nbsp;<spring:message code="message.common.service.sms.label.msg02" /></li>
		<li><i class="fa fa-exclamation-circle textcolor4"></i>&nbsp;<spring:message code="message.common.service.sms.label.msg03" /></li>
		<li><i class="fa fa-exclamation-circle textcolor4"></i>&nbsp;<spring:message code="message.common.service.sms.label.msg04" /></li>
		<li><i class="fa fa-exclamation-circle textcolor4"></i>&nbsp;<spring:message code="message.common.service.sms.label.msg10" /></li>
	</ul>
</div>
<div class="content-wrap">

	<div class="tab-wrap mt20">
		<!-- Nav tabs -->
		<ul class="nav nav-tabs6">
		  <li class="nav-item active"><a class="nav-link" data-toggle="tab" href="#cell-phone"><spring:message code="message.common.service.sms.label.cellphone" />&nbsp;<spring:message code="message.common.service.sms.label.regist" /></a></li>
		  <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#normal-phone"><spring:message code="message.common.service.sms.label.normalphone" />&nbsp;<spring:message code="message.common.service.sms.label.regist" /></a></li>
		  <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#official-phone"><spring:message code="message.common.service.sms.label.officialphone2" />&nbsp;<spring:message code="message.common.service.sms.label.regist" /></a></li>
		  <li style="float:right;line-height:20px;"><button id="tele-biz-act" type="button" class="btn btn-color7 br"><spring:message code="message.common.service.sms.label.msg06" /></button></li>
		</ul>
		
		<!-- Tab panes -->
		<form id="newSenderForm">
		<input type="hidden" name="numberToDelete">
		<input type="hidden" name="prevBizfileId">
		<input type="hidden" name="prevCertfileId">
		<div class="tab-content">
		
		  <%-- start 휴대폰번호 --%>
		  <div class="tab-pane active" id="cell-phone">
		  	<input type="hidden" name="type" value="0">
		  		<div class="ins-box mb20">
					<ul>
						<li><i class="fa fa-exclamation-circle textcolor4" ></i> <spring:message code="message.common.service.sms.label.msg05" /> </li>
					</ul>
				</div>
				
				<div class="subtitle">
					<h3 class="fleft"><spring:message code="message.common.service.sms.label.cellphone" />&nbsp;<spring:message code="message.common.service.sms.label.regist" /></h3>
				</div>
				<!-- content-write -->
				<div class="content-write border-top">		
					<table class="table table-layout-fixed">
						<caption></caption>
						<colgroup>
							<col style="width:150px">
							<col style="width:*">
						</colgroup>
						<tbody>							
							<tr>
								<th scope="row"><label for="cpNm"><spring:message code="message.common.service.sms.label.cellphone" /></label></th>
								<td>
									<input type="text" name="phoneNumber[]" class="w40" maxlength="3">
									 - <input type="text" name="phoneNumber[]" class="w50" maxlength="4"> 
									 - <input type="text" name="phoneNumber[]" class="w50" maxlength="4">
									<button type="button" class="btn s2 btn-color7 br requestAuthNumber"><spring:message code="message.common.service.sms.label.authNumber.request" /></button>
								</td>
							</tr>					
							<tr>
								<th scope="row"><label for="cpNm"><spring:message code="message.common.service.sms.label.authNumber" /></label></th>
								<td><input type="text" name="authNumber" class="w200" maxlength="6" placeholder='<spring:message code="message.common.service.sms.label.authNumber.placeholder" />'><span id="countDown"></span></td>
							</tr>					
						</tbody>
					</table>
				</div>
				<!-- //content-write -->
	
				<div class="btn-wrap">
					<button type="button" class="btn btn-color5 br submitSender"><spring:message code="message.common.service.sms.label.registNumber" /></button>
					<button type="button" class="btn btn-color7 br resetBtn"><spring:message code="message.common.service.sms.label.cancel" /></button>
				</div>
				
		  </div>
		  <%-- end 휴대폰번호 --%>
		  
		  <%-- start 일반번호 --%>
		  <div class="tab-pane" id="normal-phone">
		  	<input type="hidden" name="type" value="1">
		  
		  	<div class="ins-box mb20">
				<ul><li><i class="fa fa-exclamation-circle textcolor4"></i> <spring:message code="message.common.service.sms.label.msg07" /></li></ul>
			</div>
			
			<div class="subtitle">
				<h3 class="fleft"><spring:message code="message.common.service.sms.label.normalphone" />&nbsp;<spring:message code="message.common.service.sms.label.regist" /></h3>
				<div class="fright"><button class="btn btn-color7 br guideCertBtn" type="button"><spring:message code="message.common.service.sms.label.msg08" /></button></div>
			</div>
			<!-- content-write -->
			<div class="content-write border-top">		
				<form>
					<table class="table table-layout-fixed">
						<caption></caption>
						<colgroup>
							<col style="width:150px">
							<col style="width:*">
						</colgroup>
						<tbody>							
							<tr>
								<th scope="row"><label for="cpNm"><spring:message code="message.common.service.sms.label.normalphone" /></label></th>
								<td>
									<input type="text" name="phoneNumber[]" class="w40" maxlength="3">
									 - <input type="text" name="phoneNumber[]" class="w50" maxlength="4">
									 - <input type="text" name="phoneNumber[]" class="w50" maxlength="4">
								</td>
							</tr>					
							<tr>
								<th scope="row"><label for="cpNm"><spring:message code="message.common.service.sms.label.bizfile" /></label></th>
								<td class="sender-file">
									<div class="file" style="display:none;"><i class="icon attach"></i><span class="sender-file-name"></span></div>
									<input type="hidden" class="singleFile">
									<button type="button" id="nBizfileBtn" class="btn s2 btn-color7 br"><spring:message code="message.common.service.sms.label.regist" /></button>
								</td>
							</tr>					
							<tr>
								<th scope="row"><label for="cpNm"><spring:message code="message.common.service.sms.label.certfile" /></label></th>
								<td class="sender-file">
									<div class="file" style="display:none;"><i class="icon attach"></i><span class="sender-file-name"></span></div>
									<input type="hidden" class="singleFile">
									<button type="button" id="nCertfileBtn" class="btn s2 btn-color7 br"><spring:message code="message.common.service.sms.label.regist" /></button>
								</td>
							</tr>					
						</tbody>
					</table>
				</form>
			</div>
			<!-- //content-write -->

			<div class="btn-wrap">
				<button type="button" class="btn btn-color5 br submitSender"><spring:message code="message.common.service.sms.label.registNumber" /></button>
				<button type="button" class="btn btn-color7 br resetBtn"><spring:message code="message.common.service.sms.label.cancel" /></button>
			</div>

		  </div>
		  <%-- end 일반번호 --%>
		  
		  <%-- start 대표번호 --%>
		  <div class="tab-pane" id="official-phone">
		  	<input type="hidden" name="type" value="2">
		  
		  	<div class="ins-box mb20">
				<ul><li><i class="fa fa-exclamation-circle textcolor4"></i> <spring:message code="message.common.service.sms.label.msg09" /></li></ul>
			</div>
			
			<div class="subtitle">
				<h3 class="fleft"><spring:message code="message.common.service.sms.label.officialphone2" />&nbsp;<spring:message code="message.common.service.sms.label.regist" /></h3>
				<div class="fright"><button class="btn btn-color7 br guideCertBtn" type="button"><spring:message code="message.common.service.sms.label.msg08" /></button></div>
			</div>
			
			<!-- content-write -->
			<div class="content-write border-top">		
				<form>
					<table class="table table-layout-fixed">
						<caption></caption>
						<colgroup>
							<col style="width:150px">
							<col style="width:*">
						</colgroup>
						<tbody>							
							<tr>
								<th scope="row"><label for="cpNm"><spring:message code="message.common.service.sms.label.officialphone" /></label></th>
								<td>
									<input type="text" name="phoneNumber[]" class="w50" maxlength="4">
									 - <input type="text" name="phoneNumber[]" class="w50" maxlength="4">
								</td>
							</tr>					
							<tr>
								<th scope="row"><label for="cpNm"><spring:message code="message.common.service.sms.label.bizfile" /></label></th>
								<td class="sender-file">
									<div class="file" style="display:none;"><i class="icon attach"></i><span class="sender-file-name"></span></div>
									<input type="hidden" class="singleFile">
									<button type="button" id="oBizfileBtn" class="btn s2 btn-color7 br"><spring:message code="message.common.service.sms.label.regist" /></button>
								</td>
							</tr>					
							<tr>
								<th scope="row"><label for="cpNm"><spring:message code="message.common.service.sms.label.certfile" /></label></th>
								<td class="sender-file">
									<div class="file" style="display:none;"><i class="icon attach"></i><span class="sender-file-name"></span></div>
									<input type="hidden" class="singleFile">
									<button type="button" id="oCertfileBtn" class="btn s2 btn-color7 br"><spring:message code="message.common.service.sms.label.regist" /></button>
								</td>
							</tr>					
						</tbody>
					</table>
				</form>
			</div>
			<!-- //content-write -->

			<div class="btn-wrap">
				<button type="button" class="btn btn-color5 br submitSender"><spring:message code="message.common.service.sms.label.registNumber" /></button>
				<button type="button" class="btn btn-color7 br resetBtn"><spring:message code="message.common.service.sms.label.cancel" /></button>
			</div>
			
		  </div>
		  <%-- end 대표번호 --%>
		  
		 
		</div>
		</form>
		<%-- end tab-content --%>
		
	</div>
	<%-- end tabs --%>

	<%-- start 발신번호 목록 --%>
	<div>
		<div class="subtitle mt0">
			<h3 class="fleft"><spring:message code="message.common.service.sms.label.smsSender.list" /></h3>
		</div>
		<div class="content-view">
			<table class="table full-border">
				<caption></caption>
				<colgroup>
					<col width="5%">
					<col width="15%">
					<col width="10%">
					<col width="20%">
					<col width="5%">
					<col width="15%">
					<col width="10%">
					<col width="20%">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th scope="col">No</th>
						<th scope="col"><spring:message code="message.common.service.sms.label.number" /></th>
						<th scope="col"><spring:message code="message.common.service.sms.label.status" /></th>
						<th scope="col"><spring:message code="message.common.service.sms.label.management" /></th>
						<th scope="col">No</th>
						<th scope="col"><spring:message code="message.common.service.sms.label.number" /></th>
						<th scope="col"><spring:message code="message.common.service.sms.label.status" /></th>
						<th scope="col"><spring:message code="message.common.service.sms.label.management" /></th>
					</tr>
				</thead>
				<tbody id="senderList"></tbody>
			</table>
		</div>
	</div>
	<%-- end 발신번호 목록 --%>

</div>