<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>업로드 미리보기(추가버전)</title>
<style>
ul,li{ margin: 0; padding: 0;}
li{ list-style: none; width: 100%; display: inline-block; margin: 0.3em 0;}
.preview{ display: inline-block; width: 82px; height: 82px; float: left;}
.imgUpBtn{ display: inline-block; padding: 1.9em 2em; background-color:cornflowerblue; color: #fff; font-size: 16px; font-weight: 700; border: 0;}
.ImgRemoveBtn{ display: inline-block; padding: 1.9em 2em; color: #fff; background-color: #555;font-size: 16px; font-weight: 700;}
#ImgAddBtn{ padding: 1.9em 2em; color: #fff; background-color:coral; font-weight: 700;}
</style>
<script>
// 미리보기 목록 추가
function fileinputAdd(){
// 미리보기 리스트 추가
var li = "<img class=\"preview\" alt=\"\" />"
+ "<button class=\"imgUpBtn\">이미지 업로드</button>"
+ "<a class=\"ImgRemoveBtn\">삭제</a>";
var ul = document.getElementById("image-list");
ul.innerHTML += "<li>"+li+"</li>";
// 인풋 파일 생성
var fileinput = document.createElement("INPUT");
fileinput.setAttribute("type", "file");
fileinput.setAttribute("class", "files");
fileinput.setAttribute("name", "files[]");
fileinput.setAttribute("accept", "image/jpeg, image/png");
fileinput.setAttribute("style", "display:none;");
document.body.appendChild(fileinput);
// 삭제도 있어야될것 같아서 넣어봄
var removeBtn = document.getElementsByClassName("ImgRemoveBtn");
for(var i = 0; i < removeBtn.length; i++){
removeBtn[i].setAttribute("onclick","fileinputRemove("+i+");");
}
// 새로 생성되면서 파일 미리보기 다시 로드
previewInputReload();
// 이미지 업로드 버튼 기능 다시 로드
fileimgUpBtnReload();
}
// 미리보기 개별 삭제
function fileinputRemove(index){
var li = document.querySelectorAll('#image-list li')[index];
var input = document.getElementsByClassName('files')[index];
var removeBtn = document.getElementsByClassName("ImgRemoveBtn")[index];
if(li != undefined){
input.remove();
li.remove();
removeBtn.remove();
li = document.querySelectorAll('#image-list li');
for(var i = 0; i < li.length; i++){
var removeBtn = document.getElementsByClassName("ImgRemoveBtn")[i];
removeBtn.setAttribute("onclick","fileinputRemove("+i+");");
}
}
// 삭제되면되면 파일 미리보기 다시 로드
previewInputReload();
// 삭제후 이미지 업로드 버튼 기능 다시 로드
fileimgUpBtnReload();
}
// 파일 업로드기능 function 연결하는 부분
function fileimgUpBtnReload(){
var uploadBtn = document.getElementsByClassName('imgUpBtn');
for(var i = 0; i <uploadBtn.length; i++){
uploadBtn[i].setAttribute("onclick","uploadFile("+i+");");
}
}
// 이미지 업로드 버튼 눌를때 해당 파일인풋 대신 클릭
function uploadFile(index){
document.getElementsByClassName("files")[index].click();
}
// 이미지 미리보기 관련 다시 로드
function previewInputReload(){
var input = document.getElementsByClassName('files');
for(var i=0; i< input.length;i++){
input[i].setAttribute("onchange","document.getElementsByClassName('preview')["+i+"].src=window.URL.createObjectURL(this.files[0])");
}
}
// window 로드시
window.onload = function(){
// image-list 에 기본적으로 파일 업로드 하나는 넣어줌..
fileinputAdd();
var AddBtn = document.getElementById("ImgAddBtn");
// 파일 추가 클릭 이벤트 생성
AddBtn.addEventListener("click", function(){
fileinputAdd();
},false);
}
</script>
</head>
<body>
<button id="ImgAddBtn">파일추가</button>
<ul id="image-list"></ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>업로드 미리보기(단딜(multiple) 버전)</title>
<style>
#image-list > img{ width: 82px; height: 82px; margin: 1px; display: inline-block;}
#imgUpBtn{ padding: 1.9em 2em; color: #fff; background-color:coral; font-weight: 700;}
</style>
<script>
// window 로드시
window.onload = function(){
var UpBtn = document.getElementById("imgUpBtn");
// 파일 추가 클릭 이벤트 생성
UpBtn.addEventListener("click", function(){
var fileinput = document.createElement("INPUT");
fileinput.setAttribute("type", "file");
fileinput.setAttribute("class", "files");
fileinput.setAttribute("name", "files[]");
fileinput.setAttribute("id", "imgUpInput");
fileinput.setAttribute("multiple", "multiple");
fileinput.setAttribute("accept", "image/jpeg, image/png");
fileinput.setAttribute("style", "display:none;");
// 파일 변동시 처리
fileinput.setAttribute("onchange","previewImages(this.files);");
document.body.appendChild(fileinput);
// input file 를 눌러줌
document.getElementById("imgUpInput").click();
},false);
}
function previewImages(obj){
for(var i = 0; i < obj.length; i++){
var img = document.createElement("img");
img.setAttribute("src", window.URL.createObjectURL(obj[i]));
var list = document.getElementById("image-list");
list.appendChild(img);
}
}
</script>
</head>
<body>
<button id="imgUpBtn">이미지 업로드</button>
<div id="image-list"></div>
</body>
</html>
댓글 없음:
댓글 쓰기