업무상 ..
첨부 파일을 + 버튼을 눌러서 여러개 추가하는 것을 만들었습니다.
자주 하는거라 귀찮기도 하지만 ... 그래도 해야 하기에 합니다.
그리고 문득 깨달음이 있어 글을 작성하게 되었습니다. ㅎㅎ
등록일 : ,
파일 업로드 기능을 만들다가 문득

+ 버튼을 눌러서 추가하는 방법 몇가지
- 미리 숨겨둔 파일선택 영역을 보여줌 처리 한다.
- 자바 스크립트로 태그를 쓰도록 해서 추가 시킨다.
- 태그를 쓰는 방식이 아닌 방법으로 동적 생성한다.
크게 이 정도 있을것입니다.
이런 작업이 은근 손도 많이 가고 귀찮습니다.
- 자바 스크립트로 태그를 쓰도록 해서 추가 시킨다.
- 태그를 쓰는 방식이 아닌 방법으로 동적 생성한다.
크게 이 정도 있을것입니다.
이런 작업이 은근 손도 많이 가고 귀찮습니다.
시작해 보겠습니다.
기본 구성입니다.
추가 버튼을 누르면 파일 선택을 더 할 수 있는 영역이 추가됩니다.
추가 버튼을 누르면 파일 선택을 더 할 수 있는 영역이 추가됩니다.
첨부파일 |
---|
HTML
<table cellpadding="5" cellspacing="0" border="1">
<tr name="tr_attach_file">
<th>첨부파일</th>
<td>
<input type="file" name="attachFile" /> <button type="button">추가</button>
</td>
</tr>
</table>
이 예제는 눌러도 작동되지 않습니다. ㅎ
좀 더 현실적인 모습으로 만들어 보았습니다.
추가 버튼을 여러번 눌러서 파일을 여러개 올릴 수 있도록 하려고 합니다.
하지만 !!! 이 예제는
추가 버튼을 누르면 한번만 작동되고 그 다음부터는 원하는대로 추가 되지 않을겁니다.
추가 버튼을 여러번 눌러서 파일을 여러개 올릴 수 있도록 하려고 합니다.
하지만 !!! 이 예제는
추가 버튼을 누르면 한번만 작동되고 그 다음부터는 원하는대로 추가 되지 않을겁니다.
HTML
<!-- 테이블을 하나 만들고 안보이게 설정합니다 -->
<!-- 아래 테이블의 TR을 그대로 읽어다가 추가할 때 사용할 겁니다 -->
<!-- 기존 요소를 그대로 가져다가 원하는곳에 추가시키는 방법입니다 -->
<!-- 컨트롤 C, V 생각하시면 되겠습니다. ㅎㅎ -->
<table id="preset" style="display:none;">
<tr name="tr_attach_file">
<th>첨부파일</th>
<td>
<input type="file" name="attachFile" />
</td>
</tr>
</table>
<form name="form1" method="post" action="">
<table cellpadding="5" cellspacing="0" border="1">
<tr>
<th>제목</th>
<td>.</td>
</tr>
<tr>
<th>내용</th>
<td>.</td>
</tr>
<tr name="tr_attach_file">
<th>첨부파일</th>
<td>
<input type="file" name="attachFile" /> <button type="button" onclick="addFile()">추가</button>
</td>
</tr>
<!-- 추가 버튼을 누르면 위 숨겨진 테이블의 tr 을 가져다가 추가할 겁니닷 -->
</table>
</form>
자바스크립트
function addFile(){
$('[name=form1] [name=tr_attach_file]:last').after( $('#preset tr') );
// $('#preset tr') : id=preset 에서 tr 요소 셀렉트 하여
// form1 안에 이름이 tr_attach_file 인것 중 마지막 것 다음에 추가합니다.
// 이렇게 하면 실행때 마다 동적으로 하나씩 추가됩니다.
}
버튼을 누를때 마다 추가되어야 하는데 왜 안될까요? 다음 예제를 봅시다.
위 예제의 문제는 ?
버그 그런건 아닙니다. ㅎㅎ
$('#preset tr') 이 부분에 주목 !!
위 셀렉터는 숨겨진 테이블의 tr 태그를 의미하는데요. 이걸 복사해서 사용하려고 했습니다.
하지만 after( $('#preset tr') ) 이렇게 하면 after 메소드를 이용하여 원하는 추가가 됩니다만..
복사해서 추가된 것이 아니고 그대로 가져와서 추가한것 즉 이동이 됩니다.
그래서 다시 $('#preset tr') 를 하면 이미 내용이 옮겨가서 없어진 상태라 가져올게 없습니다.
컨트롤 C, V 를 원했는데.. 컨트롤 X, V 가 된거죠.
이러면 안되지 말입니다. 복사를 한게 아니고 이동을 했습니다.
여기서 깨달을음 얻고 이 글을 작성하게 되었습니다.
$('#preset tr') 이 부분에 주목 !!
위 셀렉터는 숨겨진 테이블의 tr 태그를 의미하는데요. 이걸 복사해서 사용하려고 했습니다.
하지만 after( $('#preset tr') ) 이렇게 하면 after 메소드를 이용하여 원하는 추가가 됩니다만..
복사해서 추가된 것이 아니고 그대로 가져와서 추가한것 즉 이동이 됩니다.
그래서 다시 $('#preset tr') 를 하면 이미 내용이 옮겨가서 없어진 상태라 가져올게 없습니다.
컨트롤 C, V 를 원했는데.. 컨트롤 X, V 가 된거죠.
이러면 안되지 말입니다. 복사를 한게 아니고 이동을 했습니다.
여기서 깨달을음 얻고 이 글을 작성하게 되었습니다.
되면 한다 !!
하면 되는게 아니고 되면 하는겁니다.
내공이 쌓인다면 안되는건 빠르게 판단하는 능력이 생기게 됩니다.
안되는건 안되는거니까요. ㅎㅎ
자 그럼 간단히 해결해 보겠습니다.
제이쿼리 clone() 메서드를 사용하는 겁니다. 클론? 네 그겁니다. 복제 !
추가 버튼을 눌러보세요.
내공이 쌓인다면 안되는건 빠르게 판단하는 능력이 생기게 됩니다.
안되는건 안되는거니까요. ㅎㅎ
자 그럼 간단히 해결해 보겠습니다.
제이쿼리 clone() 메서드를 사용하는 겁니다. 클론? 네 그겁니다. 복제 !
추가 버튼을 눌러보세요.
HTML
<table id="preset" style="display:none;">
<tr name="tr_attach_file">
<th>첨부파일</th>
<td>
<input type="file" name="attachFile" />
</td>
</tr>
</table>
<form name="form1" method="post" action="">
<table cellpadding="5" cellspacing="0" border="1">
<tr>
<th>제목</th>
<td>.</td>
</tr>
<tr>
<th>내용</th>
<td>.</td>
</tr>
<tr name="tr_attach_file">
<th>첨부파일</th>
<td>
<input type="file" name="attachFile" /> <button type="button" onclick="addFile()">추가</button>
</td>
</tr>
<!-- 추가 버튼을 누르면 위 숨겨진 테이블의 tr 을 가져다가 추가할 겁니닷 -->
</table>
</form>
자바스크립트
function addFile(){
$('[name=form1] [name=tr_attach_file]:last').after( $('#preset tr').clone() );
// $('#preset tr').clone() : id=preset 에서 tr 요소 셀렉트 하여 복제 !!
// form1 안에 이름이 tr_attach_file 인것 중 마지막 것 다음에 추가합니다.
// 이렇게 하면 실행때 마다 동적으로 하나씩 추가됩니다.
}
$( '#preset tr' ).clone()
실행 가능한 소스
마치며

$(개).clone()
원래 생각했던 것과 다른 처리가 되서 알게된 내용을 올려보았습니다.
많이 했다고 생각했는데.. 역시 끝은 없네요.
즐거운 개발 되시기 바랍니다. !!
많이 했다고 생각했는데.. 역시 끝은 없네요.
즐거운 개발 되시기 바랍니다. !!
즐거운 개발 이에요~ !!

개발1

개발2
정직한 제목 정직한 내용
방문해 주셔서 감사드립니다 !!