139 lines
3.7 KiB
PHP
139 lines
3.7 KiB
PHP
<script src="https://use.fontawesome.com/0ec13dcd55.js"></script>
|
|
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
|
|
<style type="text/css">
|
|
.imgs_wrap {
|
|
border: 2px solid #A8A8A8;
|
|
min-height:220px;
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
.imgs_wrap img {
|
|
max-width: 150px;
|
|
margin-left:8px;
|
|
margin-top:8px;
|
|
}
|
|
.AClass{
|
|
font-size: 17px;
|
|
position: absolute;
|
|
opacity: 1;
|
|
color:red;
|
|
}
|
|
.wrap_div_img{
|
|
max-width: 150px;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
.btn-_default{
|
|
padding: 10px 16px;
|
|
font-size: 18px;
|
|
line-height: 1.3333333;
|
|
border-radius: 6px;
|
|
color: #333;
|
|
background-color: #fff;
|
|
border-color: #ccc;
|
|
border: 1px solid transparent;
|
|
}
|
|
</style>
|
|
<br>
|
|
|
|
<div style="width:90%; margin:auto;">
|
|
<div>
|
|
<div class="imgs_wrap" style="text-align:center;">
|
|
<h2 class="imgs_wrap_h2" style="color: #aaa;top: 50px;position: relative;"><b>이미지 미리보기</b></h2>
|
|
</div>
|
|
</div>
|
|
<div class="input_wrap" style="text-align:center;">
|
|
<a href="javascript:" onclick="file_upload();" class="btn-_default" style="width: 150;height: 45px;">사진선택</a>
|
|
<input type="file" id="input_imgs" multiple style="display:none" />
|
|
|
|
<a href="javascript:" class="btn-_default" style="width: 150;height: 45px;" onclick="file_submit();">전송하기</a>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
|
|
var sel_files = new Array();
|
|
var h2_html = "<h2 class=\"imgs_wrap_h2\" style=\"color: #aaa;top: 50px; position: relative;\"><b>이미지 미리보기</b></h2>";
|
|
|
|
$(document).ready(function() {
|
|
$("#input_imgs").on("change", file_handler);
|
|
});
|
|
|
|
function file_upload()
|
|
{
|
|
$("#input_imgs").trigger('click');
|
|
}
|
|
|
|
function file_handler(e)
|
|
{
|
|
console.log("asdf");
|
|
|
|
var files = e.target.files;
|
|
var filesArr = Array.prototype.slice.call(files);
|
|
filesArr.forEach(function(file) {
|
|
if(!file.type.match("image.*"))
|
|
{
|
|
alert("확장자는 이미지 파일만 가능합니다.");
|
|
return;
|
|
}
|
|
|
|
var f_reader = new FileReader();
|
|
var index = sel_files.length;
|
|
f_reader.onload = function(e) {
|
|
|
|
var delete_html = "<div class=\"wrap_div_img\" id=\"img_id_"+index+"\" style=\"display: inline-block\">" +
|
|
"<button type=\"button\" class=\"close AClass\" style=\"\" onclick=\"delete_img("+index+")\"><span><i class=\"fa fa-times-circle-o\" aria-hidden=\"true\"></i></span></button>"+
|
|
"<img src=\"" + e.target.result + "\" ></a>"+
|
|
"</div>";
|
|
$(".imgs_wrap").append(delete_html);
|
|
$(".imgs_wrap_h2").remove();
|
|
$(".imgs_wrap").css("text-align", "");
|
|
}
|
|
console.log(e.target.result);
|
|
sel_files.push(file);
|
|
f_reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
|
|
function delete_img(index)
|
|
{
|
|
sel_files.splice(index, 1);
|
|
$("#img_id_"+index).remove();
|
|
if( sel_files.length == 0 )
|
|
{
|
|
$(".imgs_wrap").append(h2_html);
|
|
$(".imgs_wrap").css("text-align", "center");
|
|
}
|
|
}
|
|
|
|
function file_submit()
|
|
{
|
|
var data = new FormData();
|
|
|
|
for(var i=0; i<sel_files.length; i++)
|
|
{
|
|
var name = i;
|
|
data.append(name, sel_files[i]);
|
|
}
|
|
|
|
data.append("image_count", sel_files.length);
|
|
if(sel_files.length < 1)
|
|
{
|
|
alert("파일을 선택해주세요.")
|
|
return;
|
|
}
|
|
$.ajax({
|
|
url: "./upload_cnt.php",
|
|
type: 'POST',
|
|
data: data,
|
|
cache: false,
|
|
contentType: false,
|
|
processData: false,
|
|
success: function (response) { alert(response); },
|
|
error: function () { fx_alert("서버와의 연결에 문제가 있습니다. 잠시후 다시 시도해 주세요."); }
|
|
});
|
|
}
|
|
|
|
</script>
|