크롬80버전 결제 이슈, 영카트5 주요패치 확인! 재택근무에 따른 고객지원 안내

[HTML5] input type="file" 에서 이미지 첨부시 바로 보여주기 > 그누보드5 팁자료실

그누보드5 팁자료실

[HTML5] input type="file" 에서 이미지 첨부시 바로 보여주기 정보

[HTML5] input type="file" 에서 이미지 첨부시 바로 보여주기

본문

작업중에 구현했던 부분

바로 적용할 수 있도록 공유 합니다!

 

input type="file" 에 이미지 파일 첨부시 바로 보여주는 용도 입니다.

빨간색 표시된 id 부분만 상황에 맞게 변경하시면 됩니다.

 

아래 예시는 회원가입시 회원이미지 부분입니다.

게시판에서도 id만 맞춰주시면 쉽게 적용 가능합니다.

 

---------------------------------------------------

 

스크립트부분

<script type="text/javascript">

var sel_file;
$(document).ready(function() {
    $("#
reg_mb_img").on("change", handleImgFileSelect);
}); 

function handleImgFileSelect(e) {
    var files = e.target.files;
    var filesArr = Array.prototype.slice.call(files);

    filesArr.forEach(function(f) {
        if(!f.type.match("image.*")) {
            alert("이미지 파일만 첨부해주세요.");
            return;
        }

        sel_file = f;
        var reader = new FileReader();
        reader.onload = function(e) {
            $("#img").attr("src", e.target.result);
        }
        reader.readAsDataURL(f);
    });
}

</script>

 

 

첨부된 이미지 출력부분

<div class="img_wrap">
    
<img id="img" />
</div>

 

 

파일첨부 input

<input type="file" id="reg_mb_img">

 

---------------------------------------------------

 

<img id="img" src="<?php echo $img ?>">

와 같이 파일경로가 미리 들어있을때도 잘 대체 합니다~

(이미지 수정시 미리 띄워놓기)

 

 

적용예시 (이뻐.. .)

 

237736610_1576775078.6498.png

추천11

댓글 전체

우와
작년에도 펄스나인 팁 덕분에 야근에서 해방되었는데
올해는 펄스나인님 덕분에 주말있는 삶을 살수 있겠어요 ^^
너무 좋은 팁 감사드립니다
키핑해두었다가 다음번에 업데이트 할때 써봐야겠어요 너무 좋네요
안녕하세요 ^^ 도움이 되신다니 저도 좋네요~
올해는 작년보다 더~ 적게 일하시고 많이 버시길 기원합니다 ㅎㅎ
새해 복 많이 받으세요~
전체 1,593 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT