작업중에 구현했던 부분

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

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 ?>">

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

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

적용예시 (이뻐.. .)