19. 4. 4.

이미지 파일 업로드 전 미리보기

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!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>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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>
작성자: 시간:
라벨: ,

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)