[html]
|
1
2
3
4
5
6
7
8
9
10
11
|
<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) |
|
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
|
//버튼 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]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
.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,CSS,JS' 카테고리의 다른 글
| openlayers 5 기본기(지도 생성, 마커/팝업 생성) (1) | 2019.07.23 |
|---|---|
| 브이월드(opanlayers 3) 지도 + WMS(상권 지도) + 다음 로드뷰 (0) | 2019.07.12 |
| 동적으로 생성된 파일첨부 데이터 ajax로 보내기 + php (0) | 2019.07.08 |
| 동적으로 생성된 요소에 이벤트 바인딩 (0) | 2019.06.26 |
| HTML AJAX post 사용 방법 (feat. Flask API Server[Python]) (0) | 2019.05.20 |
