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

안녕하세요~

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

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

 

<!-- 입력필드 -->

<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 이런식으로 클래스가 자동으로 붙다보니 같이 들어가는거 같습니다.

 

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

 

입력필드 구조는

텍스트 에어리어

파일

텍스트 에어리어

파일

 

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

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 현재 어떤 코드를 추가해서 사용 중이신지요?

    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 플러그인을 사용해서 코드를 추가할 수 있습니다.

    고맙습니다.

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

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

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

     

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

     

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

  • 안녕하세요~^^

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

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

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

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

     

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

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

     

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

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

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

    고맙습니다.

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

AI 상담