+버튼 클릭시 파일첨부 폼 동적 생성하기

[html]

 

<div class="image">
    <div class="image_title">
        이미지 첨부(최대 10개)
    </div>
    <div class="image_swiper">
        <div class="image_div_0">
            <label for ="image_plus_0"></label>
            <input type="file" id="image_plus_0">
        </div>
    </div>
</div>

적당한 + 이미지가 없어서 달력 이미지로 버튼 구현

 

[script]

 

index 는 전역변수.. 파일 첨부에 고유 번호 부여 하기 위해 필요

 

//중요//

보통 아래와 같은 형식으로 사용하는데

$(선택자).on('change/click 등', function(){        함수 내용... });

 

html이 처음 생성될때 기존에 있는 폼들만 이벤트 바인딩을 하고 동적으로 생성된 폼들은 이벤트 바인딩이 되어있지 않다. 그래서 위와 같이 작성하면 동적으로 생성된 기능들은 실행되지 않는다. 이에 대한 해결 방법으로는 다음과 같다.

$(document).on("change/click", '선택', function(event)

 

//버튼 DIV 변수
    var index = 0;
 
    //이미지 추가 버튼 클릭시
    $(document).on("change", '.at_2 input[type=file]', function(event) {
 
        var target = $(this)[0];
        
 
        if(target != null){
            //------------------이미지 확장자 검사 시작--------------------------------//
            var fileNM = $(this).val();
 
            var ext = fileNM.slice(fileNM.lastIndexOf(".") + 1).toLowerCase();
 
            if (!(ext == "gif" || ext == "jpg" || ext == "png")) {
                alert("이미지파일 (.jpg, .png, .gif ) 만 업로드 가능합니다.");
                return false;
            }
            //------------------이미지 확장자 검사 종료--------------------------------//
            // 상위 요소
            var img_div = $(this).parent();
 
            var fileList = target.files ;
        
            // 파일리더기 생성
            var reader = new FileReader();
            
            // 파일 위치 읽기
            reader.readAsDataURL(fileList [0]);
            
            //로드 한 후 이미지 요소 설정(스타일,url)
            reader.onload = function  (e) {
 
                // 이미지 미리보기
                img_div.children('label').css('background','url('+ e.target.result +') center no-repeat').css('background-size','105px 105px');
                
            };
 
            // 이미지 파일 첨부 버튼 추가 하기
            // 새로운 div 생성
            var div = document.createElement('div');
 
            index++;
 
            // 새로운 div의 className 지정
            div.className = 'image_div_'+index+'';
 
            div.innerHTML = '<label for ="image_plus_'+index+'"></label>\<input type="file" id="image_plus_'+index+'">';
            
            // 추가
            $('.image_swiper').append(div);
 
            
            // 테스트
            //alert($(this).parent().attr('class'));
            //alert(index);
            //$(this).parent().attr('class')
        }else{
            alert("이미지 없음");
        }
    });

[css]

.image_swiper div{
  display: inline-block;
  width: 105px;
  height: 105px;
  z-index: 1;
}
.image_swiper div input[type=file]{
  display: none;
}
.image_swiper div label{
  display: inline-block;
  width: 105px;
  height: 105px;
  background: url("../images/icon/calendar_1.png") #9fd1ff no-repeat center;
  z-index: 0;
}
//주석/ 버튼 클릭시 배경 색상 
.image_swiper div label:hover{
  background: url("../images/icon/calendar_1.png") #0084ff no-repeat center;
}

html 화면

크롬 검사 화면(html화면에서 마우스 우클릭 -> 검)