파일필드를 입력필드 사이사이에 넣고 싶습니다.

안녕하세요~

텍스트 필드 사이에다가 파일 필드를 넣고 최대 갯수를 설정하니,

업로드한 이미지가 같이 들어가더라구요.

 

<!-- 입력필드 -->

<div class="kboard-attr-row kboard-attr-textarea meta-key-when ">
        <label class="attr-name" for="when"><span class="field-name">언제?</span></label>
        <div class="attr-value">
            <textarea id="when" name="kboard_option_when" class=""></textarea>

         </div>
</div>

<!-- 첨부필드 -->

<div class="kboard-attr-row kboard-attr-file attach-1">
        <label class="attr-name" for="kboard-input-file1"><span class="field-name">사진</span>1</label>
            <div class="attr-value">
                     <input type="file" id="kboard-input-file1" accept="image/jpeg, image/jpg, image/png" name="kboard_attach_file1" onchange="fileCheck(this);">
                      <p class="kboard-attatch-preview kboard-input-file1"></p>
               </div> 
 </div>

<div class="kboard-attr-row kboard-attr-file attach-2">
        <label class="attr-name" for="kboard-input-file1"><span class="field-name">사진</span>1</label>
            <div class="attr-value">
                     <input type="file" id="kboard-input-file1" accept="image/jpeg, image/jpg, image/png" name="kboard_attach_file1" onchange="fileCheck(this);">
                      <p class="kboard-attatch-preview kboard-input-file1"></p>
               </div> 
 </div>

 

위에 소스 처럼 반복적으로 게시판에 넣고 싶은데

attach-1 이런식으로 클래스가 자동으로 붙다보니 같이 들어가는거 같습니다.

 

각각 따로따로 부여 할 수는 없을까요??

 

입력필드 구조는

텍스트 에어리어

파일

텍스트 에어리어

파일

 

이런식으로 넣어놨습니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    KBoard 플러그인에서 첨부파일의 최대 첨부파일 개수 설정 시

    첨부파일1, 첨부파일2, 첨부파일3 이런 식으로 아래에 표시됩니다.

    만약, 첨부파일 필드를 다른 입력 필드들 사이에 추가하시려면

    파일 필드를 활용해보시는 건 어떠신지요?

     

    워드프레스 관리자 -> KBoard -> 게시판 목록 -> 게시판 선택 -> 입력필드 설정 탭에서

    확장 필드 중 파일 필드를 활용해보세요.

     

    위의 설정은 입력필드 설정을 지원하는 스킨에만 적용됩니다.

    입력필드 설정을 지원하지 않는 스킨을 사용 중이시라면

    어떤 스킨을 사용 중이신지 알려주시겠어요?

    고맙습니다.

  • ask-one 스킨 사용중이고,

    그 첨부파일을 올리면 첨부파일이 보이는 함수를 사용 중인데,

    그거를 사용하니깐 아예 안나와서

     

    $field['field_type'] == 'file'

     

    이렇게 했는데,  파일필드가 없어지더라구요.

  • 현재 어떤 코드를 추가해서 사용 중이신지요?

    1:1 게시판이 아닌 공개된 커뮤니티라 내용을 최대한 자세하게 올려주시는 게 좋습니다.

    또한 저희가 과거 문의를 전부 기억할 수도 없기도 하고요.

     

    아래 링크의 코드를 활용 중이신지요?

    https://www.cosmosfarm.com/threads/document/50499#document-answer-50586

     

    아래의 코드도 추가하시면 확장 필드의 파일 필드에 이미지 업로드 시

    미리보기 기능을 사용하실 수 있습니다.

    add_filter('kboard_get_template_field_html', 'kboard_get_template_field_html_20210324', 10, 4);
    function kboard_get_template_field_html_20210324($field_html, $field, $content, $board){
    	if($field['field_type'] == 'file' && $board->id == '1'){ // 실제 게시판 id로 적용해주세요.
    		$meta_key = (isset($field['meta_key']) && $field['meta_key']) ? $field['meta_key'] : '';
    		$field_name = (isset($field['field_name'])&&$field['field_name']) ? $field['field_name'] : $field['field_label'];
    		$url = new KBUrl();
    		
    		ob_start();
    		?>
    		<div class="kboard-attr-row <?php echo esc_attr($field['class'])?> meta-key-<?php echo esc_attr($meta_key)?>">
    			<label class="attr-name" for="<?php echo esc_attr($meta_key)?>"><span class="field-name"><?php echo esc_html($field_name)?></span></label>
    			<div class="attr-value">
    				<?php if(isset($content->attach->{$meta_key})):?><?php echo $content->attach->{$meta_key}[1]?> - <a href="<?php echo $url->getDeleteURLWithAttach($content->uid, $meta_key)?>" onclick="return confirm('<?php echo __('Are you sure you want to delete?', 'kboard')?>');"><?php echo __('Delete file', 'kboard')?></a><?php endif?>
    					<input type="file" id="kboard-input-<?php echo esc_attr($meta_key)?>" name="kboard_attach_<?php echo esc_attr($meta_key)?>">
    				<?php if(isset($field['description']) && $field['description']):?><div class="description"><?php echo esc_html($field['description'])?></div><?php endif?>
    				<p class="kboard-attatch-preview kboard-input-<?php echo esc_attr($meta_key)?>">
    					<?php if(isset($content->attach->{$meta_key})&&$content->attach->{$meta_key}):?>
    						<?php $extension = strtolower(pathinfo($content->attach->{$meta_key}[0], PATHINFO_EXTENSION))?>
    						<?php if(in_array($extension, array('gif','jpg','jpeg','png'))):?>
    							<img src="<?php echo site_url($content->attach->{$meta_key}[0])?>" alt="<?php echo $content->attach->{$meta_key}[1]?>">
    						<?php endif?>
    					<?php endif?>
    				</p>
    			</div>
    		</div>
    		<?php
    		$field_html = ob_get_clean();
    	}
    
    	return $field_html;
    }
    
    add_action('kboard_skin_header', 'kboard_skin_header_20210324', 10, 1);
    function kboard_skin_header_20210324($builder){
    	$board = $builder->board;
    	if(kboard_builder_mod() == 'editor' && $board->id == '1'){ // 실제 게시판 id로 적용해주세요.
    		?>
    		<script>
    		jQuery(document).ready(function(){
    			jQuery('.kboard-attr-file input[type="file"]').on('change', function(){
    				kboard_update_attachment_file_field(this);
    			});
    		});
    		
    		function kboard_update_attachment_file_field(input){
    			var attachment_id = jQuery(input).attr('id');
    			console.log(attachment_id);
    			if(input.files && input.files[0]){
    				var reader = new FileReader();
    				reader.onload = function(e){
    					jQuery('.'+attachment_id).html('<img src='+e.target.result+'>');
    				}
    				reader.readAsDataURL(input.files[0]);
    			}
    			else{
    				jQuery('.'+attachment_id).html('');
    			}
    		}
    		</script>
    		<?php
    	}
    }

    위의 코드에서 $board->id == '1' 부분은 실제 게시판 ID로 모두 적용해주세요.

     

    테마의 functions.php 파일에 코드를 추가하거나 Code Snippets 플러그인을 사용해서 코드를 추가할 수 있습니다.

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기