파일 + 버튼

파일 + 버튼

QA

파일 + 버튼

본문

3667102531_1601117246.8084.png

 

 

이거 예전처럼 +버튼으로 할 수 없나요?

이 질문에 댓글 쓰기 :

답변 3

크게 두기지 정도 방법이 이습니다

 

1  버튼에 이벤트걸어서 파일인풋이 열리는 방식

2  파일 api  방식

질문에 가까우면서 손이 덜가는  것은

첫번쩌 일거 같구

첫번째도 선택지가 두개가 있습니다

1  순수한 버튼이나 이미지를 클릭  핬을때  클릭 이벤트에 의해 파일인풋 이벤트가 같이 작동되도록  한다

파일 인풋창은  폼값의 hidden 방식처럼 처리해서 회면상 안보이게 한다

 

2  파일 인풋창을 css를 이용해서 버튼 이미지 바로 위에 위치 시키고   position:absolute  이용

버튼 이미지만 보이게 하기 위해 파일  인풋창에  css의 opacity :0  처럼

투명도를 내려서 버튼  이미지만 보이게한다 

이 방식은 예전부터 여타 웹 브라우저의  낮은 버전에서도 널리 시용되었던 형식이며 손이 제일 덜가는 방법이니  이 방식을 사용해보세요

 

 

 

 

 

 

 

 

write.skin.php에서 아래 내용을 수정해서 임의적으로 + 버튼으로 바꿀수는 있습니다.

 

<li class="bo_w_flie">

                <div class="file_wr filebox">

                    <input type="text" class="fileName" readonly="readonly" placeholder="파일을 첨부하세요">

                    <label for="bf_file[1]"><i class="fa fa-download lb_icon" aria-hidden="true"></i><span class="sound_only">파일 #1</span><span class="btn_file">파일첨부</span></label>

                    <input type="file" name="bf_file[1]" id="bf_file[1]" title="파일첨부 1 :  용량 <?php echo $upload_max_filesize; ?> 이하만 업로드 가능" class="frm_file uploadBtn">

                    <?php if($w == 'u' && $write['qa_file1']) { ?>

                        <input type="checkbox" id="bf_file_del1" name="bf_file_del[1]" value="1">

                        <label for="bf_file_del1"><?php echo $write['qa_source1']; ?> 파일 삭제</label>

                    <?php } ?>

                </div>

                <br>

                <div class="file_wr filebox">

                    <input type="text" class="fileName" readonly="readonly" placeholder="파일을 첨부하세요">

                    <label for="bf_file[2]"><i class="fa fa-download lb_icon" aria-hidden="true"></i><span class="sound_only">파일 #2</span><span class="btn_file">파일첨부</span></label>

                    <input type="file" name="bf_file[2]" id="bf_file[2]" title="파일첨부 2 :  용량 <?php echo $upload_max_filesize; ?> 이하만 업로드 가능" class="frm_file uploadBtn">

                    <?php if($w == 'u' && $write['qa_file2']) { ?>

                    <input type="checkbox" id="bf_file_del2" name="bf_file_del[2]" value="1">

                    <label for="bf_file_del2"><?php echo $write['qa_source2']; ?> 파일 삭제</label>

                    <?php } ?>

                </div>

            </li>

답변을 작성하시기 전에 로그인 해주세요.
전체 674
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT