File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- <link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css">
<script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/publish/js/content.js"></script>
<script src="/publish/js/calendar.js"></script>
<script src="/publish/js/popup.js"></script>
<script src="/js/txtByteChk.js"></script> -->
<link rel="stylesheet" href="/css/web/colorbox/colorbox.css">
<style>
.layer_pop {width:100%; height:100%; border:5px solid #0b9f8f; border-top:none;}
.layer_pop .pop_tit {padding:0 20px;font-weight:600;font-size:16px;color:#fff;line-height:45px;background:#0b9f8f;}
.layer_pop .pop_cons {margin:30px 20px; overflow:hidden;}
.pop_top_ex li.ico {display:block;}
.pop_top_ex li {margin-bottom:2px; padding-left:10px; background-position: -5px -306px;}
.pop_top_ex li:last-child {margin-bottom:0;}
.acen {
text-align: center;
}
.mT20 {
margin-top: 20px;
}
.exl_box {
padding: 25px 30px;
background: #fafafa;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
}
.btn_m_grey {
display: inline-block;
padding: 0 25px;
font-size: 14px;
line-height: 38px;
height: 38px;
color: #fff;
text-align: center;
font-weight: bold;
background: #777;
}
.f_red {
color: #cc0000;
}
</style>
</head>
<div class="layer_pop">
<div class="pop_tit">엑셀파일 불러오기</div>
<div class="pop_cons loading_area">
<ul class="pop_top_ex">
<li class="ico">엑셀 파일은 정해진 양식에 맞춰 업로드해야 합니다. <a href="/publish/address_sample.xlsx" class="f_red">[엑셀 샘플 다운로드]</a></li>
<li class="ico">이름, 휴대폰번호는 필수로 입력해주세요.<br/> (집/사무실, 메모1, 메모2, 메모3은 선택사항)</li>
<li class="ico">첫 번째 시트(Sheet)에 등록해 주세요.</li>
<li class="ico">이곳에 입력된 번호는 주소록에 저장되지 않으니, 저장을 원하실 경우 주소록을<br />먼저 이용해주세요.
</li>
</ul>
<!-- pop_top_ex -->
<div class="exl_box mT20 acen">
<p style="border-bottom: none;">
<input type="file" name="uploadFile" />
</p>
<span id="spanFileName" class="hide"></span>
</div>
<div class="mT30 acen">
<a id="btnSubmitExcel" href="javascript:;" class="btn_m_grey">적용하기</a>
</div>
</div>
<!-- pop_cons-->
</div>
<!-- layer_pop-->
<script>
//9627개까지만 바인딩 가능 : 이후 jquery core 에러 Function.map
var _perSplice = 1000;
var _hasLeftCnt = 0;
var _iLimitSendCnt = 100000;
var _iMaxCharCnt = 0 ; //parseInt(removeComma($('#spanMaxCnt').text()), 10);
var _sCurrCntId = 'spanCurrCnt';
var _regExp1 = /(^02.{0}|^01.{1}|^[0-9]{3})-?([0-9]{3,4})-?([0-9]{4})$/;
var _receives = new Array();
var _uploadImage;
var _maxSize = 1000;
var _header = 'data:image/jpeg;base64,';
var _imgId = 'imgUpload';
var _imgBg;
$(function() {
$('#btnSubmitExcel').css({'opacity': '0.5'}).bind('click', function() {
alert('파일을 선택해 주세요.');
});
$('input[name=uploadFile]').fileupload({
url: '/web/mjon/msgdata/excelCallProc.do'
, dataType: 'json'
, autoUpload: false
, add: function(e, data) {
//console.log(data)
var sct = data.files[0].type || '';
if (sct.indexOf('spreadsheetml') > - 1 || sct.indexOf('ms-excel') > - 1) {
$('#spanFileName').text(data.files[0].name).removeClass('hide');
$('#btnSubmitExcel').css({'opacity': ''}).unbind('click').click(function() {
data.submit();
});
}
else {
$('#spanFileName').text('').addClass('hide');
$('#btnSubmitExcel').unbind('click').bind('click', function() {
alert('파일을 선택해 주세요.');
});
$('#btnSubmitExcel').css({'opacity': '0.5'});
alert('엑셀 파일만 업로드할 수 있습니다.');
}
}
, done: function(e, data) {
//console.log(data.result)
//data.result 리턴 객체
var result = data.result;
if (result.success) {
//전화번호 추가
if(result.data.length > _perSplice){
var part = getSplicedPart(result.data);
addPhone(part);
}else
addPhone(result.data);
$.colorbox.close();
}
else {
alert(result.message);
return;
}
}
, fail: function(e, data) {
alert('업로드 처리 중 오류가 발생했습니다.\n페이지를 새로고침(F5)한 후 다시 시도해 보시기 바랍니다.');
$.colorbox.close();
}
});
});
//수신번호 추가
//data : json 목록 데이터
// [{phone: '전화번호', name: '주소록이름', group: '주소록 그룹 이름', item2: '집/사무실', item3: '메모1', item4: '메모2', item5: '메모3'}, {...}]
function addPhone(data) {
var $ul = $('#ulReceives');
//한 개 수동 등록
if (data == null) {
var $txtPhone = $('#txtPhone');
if (!_regExp1.test($txtPhone.val())) {
alert('올바른 전화번호를 입력해야 합니다.');
return;
}
var obj = [{receive: '', name: '', group: '', item2: '', item3: '', item4: '', item5: ''}];
obj[0].receive = $txtPhone.val().replace(_regExp1, '$1-$2-$3');
//유무 판단
var isExist = false;
$ul.find('input:checkbox').each(function() {
if ($(this).attr('phoneNo') == obj[0].receive) {
isExist = true;
return false;
}
});
if (!isExist) {
var iCurrCount = $ul.find('li').length;
//$('#receiveTmpl').tmpl({data: obj, currCount: iCurrCount}).appendTo($ul);
$ul.append(makeTableRows(obj, iCurrCount));
$txtPhone.val('');
}
else
alert('이미 추가된 전화번호입니다.');
}
//json 목록 연계 등록
else {
var newData = new Array();
var phones = new Array();
var iSkipCnt = 0;
var idx = 0;
var $chks = $ul.find('input:checkbox');
$chks.each(function() {
phones.push($(this).attr('phoneNo'));
});
$.each(data, function(i, val) {
if ($.inArray(val.receive, phones) === -1) {
phones.push(val.receive);
newData.push(val);
}
else
++iSkipCnt;
});
// for (var x in data) {
// var isExist = false;
// $chks.each(function() {
// if ($(this).attr('phoneNo') == data[x].phone) {
// isExist = true;
// return false;
// }
// });
// if (!isExist)
// newData[idx++] = data[x];
// else
// ++iSkipCnt;
// }
try {
var iCurrCount = $ul.find('li').length;
$ul.append(makeTableRows(newData, iCurrCount));
if(_hasLeftCnt > 0)
$ul.append('<img id="loader" src="/images/loading_3_32.gif"/>');
if (iSkipCnt > 0)
alert(iSkipCnt + '개의 전화번호가 중복되어 생략되었습니다.');
}
catch(e) {
console.log(e);
alert('스크립트 오류가 발생했습니다.\n페이지를 새로고침(F5)한 후 다시 시도해 보시기 바랍니다.');
}
}
//$('#bTotalReceiveCnt').text(addComma($ul.find('li').length + _receives.length));
}
function getSplicedPart(data){
var len = data.length;
var part = data.splice(0, (len >= _perSplice) ? _perSplice : len);
_hasLeftCnt = data.length;
_receives = data;
return part;
}
function makeTableRows(json, currCnt) {
var sTemplate = '<li>'
+ '<input type="checkbox" name="receivePhone" id="receive_{idx}" phoneNo="{phone}" data-item=\'{item}\' />'
+ '<label for="receive_{idx}"><span class="num">{idx}.</span>{phone}</label>'
+ '</li>';
var sRtn = '';
var i = 0;
for (var x in json) {
//console.log(json[x])
sRtn += sTemplate.replace(/\{idx\}/g, currCnt + i + 1)
.replace(/\{phone\}/g, json[x].receive)
.replace(/\{item\}/g, JSON.stringify(json[x]));
i++;
}
var $rtn = $(sRtn);
/* $rtn.find('input[name=receivePhone]').each(function(i) {
$(this).data('item', json[i]);
}); */
return $rtn;
}
</script>