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>