input 태그 type="file" multiple 화면에 이미지 뿌려주기

먼저 HTML 코드이다.
CSS는 Bootstrap을 사용했다.
Bootstrap은 CDN을 통해 임포트를 해준다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


<div class="row">
<div class="col-25">
<label for="pic">근무지 사진</label>
</div>
<div class="col-75">
<div>
<input type="file" id="input_imgs" multiple name="files[]" maxlength="3"/>
</div>
<div>
<div class="imgs_wrap">
</div>
</div>


그다음 javascript와 jQuery

jQuery또한 CDN을 통해서 임포트 해준다.
아래의 코드는 input태그의 변화가 생겼을 때, 즉 이미지를 업로드 할 경우에,
handleImgsFilesSelect라는 함수가 실행되도록 짜여졌다.
handleImgsFilesSelect함수는 input태그에서 업로드된 사진을 a태그와 img태그로 구성된 조합의 태그에서 img 태그 src 안에 넣고 imgs_wrap클래스의 div 태그에 append 처리를 해주는 함수이다.
그리고 a태그의 href 속성에 deleteImageAction()함수를 실행시키도록 처리를 해놓았다.

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var sel_files = [];
$(document).ready(function() {
$('#input_imgs').on("change",handleImgsFilesSelect);
});
function handleImgsFilesSelect(e) {
sel_files = [];
$('.imgs_wrap').empty();
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);

var index = 0;
filesArr.forEach(function(f) {
if(!f.type.match("image.*")){
alert("확장자는 이미지 확장자만 가능합니다.");
return;
}

sel_files.push(f);

var reader = new FileReader();
reader.onload = function(e) {
var html = "<a href=\"javascript:void(0);\" onclick=\"deleteImageAction("+index+")\" id=\"img_id_"+index+"\"><img src=\"" + e.target.result +"\" data-file='"+f.name+"' class='selProductFile' title='Click to remove' width=200px height=200px></a>";
/* var img_html = "<img src=\"" + e.target.result + "\" width=200px height=200px />";
$(".imgs_wrap").append(img_html); */
$(".imgs_wrap").append(html);
index++;
}
reader.readAsDataURL(f);

});
}


function deleteImageAction(index){
console.log("index : "+index);
sel_files.splice(index, 1);
if(sel_files.length === 0){
$('.imgs_wrap').empty();
}
var img_id = "#img_id_" + index;
$(img_id).remove();

console.log(sel_files);
}

</script>

댓글

이 블로그의 인기 게시물

About JVM Warm up

About idempotent

About Kafka Basic

About ZGC

sneak peek jitpack

Spring Boot Actuator readiness, liveness probes on k8s

About Websocket minimize data size and data transfer cost on cloud

About G1 GC

대학생 코딩 과제 대행 java, python, oracle 네 번째