CI 묻고 답하기

제목 파일찾기(첨부) 버튼 동적 추가시 id? class? 어떻게 해야 하나요?
카테고리 CI 2, 3
글쓴이 그동안 작성시각 2019/06/20 23:12:07
댓글 : 6 추천 : 0 스크랩 : 0 조회수 : 13099   RSS

코드이그나이터 업로드 라이브러리와 연관성이 있을듯도 해서 이 게시판에 문의 드려요~

파일찾기 버튼이 복수개 존재합니다.(동적 추가로 파일찾기 버튼 개수는 더 늘어날 수 있습니다)

- 1개만 있을때 id="userfile"로 했음

- 현재 복수개라서 id를 사용할수 없어, class="userfile"로 변경 했더니 파일찾기 버튼을 클릭해도 반응이 없습니다.

어떻게 처리해야 할지 문의 드립니다.

 

<div class="row">
	<dl class="size-full">
		<dt>이미지</dt>
		<dd>
			<!--파일 미리보기 영역 -->
			<div class="image-add-box">
				<div class="image-empty">
					<p>파일찾기를 통해 이미지 다중 선택 가능</p>
					<p>( 개당 최대 500Kb, 실제 페이지에 가로 920px로 RESIZE 되어 보여집니다 )</p>
				</div>	
			</div>
			<!-- 파일찾기 버튼 영역 -->
			<div class="file-box">
				<label for="userfile" class="btn-lightgray"> 파일찾기 </label>
				<input type="file" multiple  class="userfile"  name="userfile[]" />
				<!--[중요] userfile 명칭은 CI upload 라이브러리에서 정해놓은 것 임 --> 
			</div>
		</dd>
	</dl>
</div>

 
 다음글 CIBOARD 설치.. (1)
 이전글 CI 개발환경 구축방법(Git, Local, Dev서버... (2)
목록

댓글

한대승(불의회상) / 2019/06/21 09:17:03 / 추천 0
클래스 셀렉터를 '#userfile'로 지정하진 않았나요?
그동안 / 2019/06/21 09:57:43 / 추천 0
대승님;; 클래스 셀렉터가 뭔가요?;;
한대승(불의회상) / 2019/06/21 10:00:40 / 추천 0
@그동안 jQuery 사용하지 않으시는지...
그동안 / 2019/06/21 10:13:14 / 추천 0

- 관련해서 제이쿼리를 사용하고 있는건 없는것 같습니다.

- 업로드 라이브러리도 손댄건 없습니다

 

<!-- 6단계 저장 시작 -->
<script src="../../js/jquery.form.min.js"></script>                     <!--아래 ajaxForm에서 사용-->
<script>
    $(document).on('click', '#add_06_insert_btn', function()            //완료 버튼 클릭 시                  
    {            

        //[2] 파일첨부로 인해 jquery.form.min.js(제이쿼리 폼 라이브러리)를 사용해서 data 전송
        $("#profile_add_06").ajaxForm(
        {
	       	url : "/my_freelancer/my_profile_add_06" ,
	       	enctype : "multipart/form-data",
	       	type : "POST" ,
	       	dataType : "json" ,
		    success : function(result)                                                            //성공 시  
		    {	
				alert("프로필 등록이 완료 되었습니다");	
				location.href="/my_freelancer/my_profile_list";                                   //목록 페이지 전환 
		    },
		    error : function(request,status,error)                                                //실패 시 
		    {
                alert(request.status + " 에러가 발행해서 6단계(마지막) 저장하지 못했습니다");
            }
        });
        $("#profile_add_06").submit() ;                                                           //전송
	});
</script> 
<!-- 6단계 저장 끝 -->

 
kaido / 2019/06/21 10:22:11 / 추천 0

우선 단어정리부터...

$ <- 요거 붙는거 자체가 jQuery 의 축약 입니다. 즉 jQuery 를 사용중이십니다.

셀렉터 =>  $("#id")   해당 타겟을 지정 하는것을 셀렉터라고 부릅니다.

아이디 인경우엔 # 으로 시작 하고 클래스인 경우 . 을 넣고 시작 합니다.

<input type="file" name="userfile" id="user_id" class= "user_class" />

//이런경우 제이쿼리 에서 해당 파일에 대한 타겟 방법 

$("#user_id") 

$(".user_class")

$("input[name=userfile]")

 

 

위 3가지는 동일한 셀렉터를 의미하고 있습니다.

셀렉터 뒤에 붙는건 [이벤트] 입니다.

$("#profile_add_06").submit() ;   

이건 해당 아이디 profile_add_06 이라는 셀렉트를 submit 이라는 이벤트를 하라 라는 의미.

 

이벤트 종류는 굉장히 많으므로 메뉴얼을 찾아보셔야 합니다.

대체로는 click , submit, change 3가지가 가장 대표적으로 많이 사용됩니다.

 

덧을 붙이자면 name userfile 명은 CI에서 붙인 파일명이 아닙니다. 샘플코드가 userfile 로 받게 되어있을뿐이죠.
그동안 / 2019/06/21 10:41:14 / 추천 0

카이도님, 대승님, 조언 감사드려요^^

라벨을 수정하니 해결됐네요

<div class="file-box">
    <label class="btn-lightgray"> 파일찾기 
    <input type="file" multiple  class="userfile" name="userfile[]" />
    <!--[중요] userfile 명칭은 CI upload 라이브러리에서 정해놓은 것 임 -->
    </label>
</div>