제이쿼리 이용해서 이미지 파일열기 후 화면에 이미지 보여주기

제이쿼리 이용해서 이미지 파일열기 후 화면에 이미지 보여주기

 

이미지를 화면에 뿌려줄때 파일열기를 이용해서 직관적으로 실행하고 싶을때,

제이쿼리의 강력한 기능으로 비교적 쉽게 구현이 가능하네요.

실무에 적용해서 실제 사용해 봤습니다.

 

삭제 버튼을 누르면 불러온 이미지가 사라지게 되는것이지요.

 

 <div id="sero3"> 이미지등록 :  </div>
	 <div id="sero4">  
	 <input type="file" name="upfile" class="inp-img" accept=".gif, .jpg, .png"> <span class="btn-delete">삭제</span>
	 </div>
 <div id="work_col_left">	 
	 <div id="preview"></div>
 </div>
<script type="text/javascript">
          
// 등록 이미지 등록 미리보기
function readInputFile(input) {
    if(input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#preview').html("<img src="+ e.target.result +">");
        }
        reader.readAsDataURL(input.files[0]);
    }
}
 
$(".inp-img").on('change', function(){
    readInputFile(this);
});
 
 
// 등록 이미지 삭제 ( input file reset )
function resetInputFile($input, $preview) {
    var agent = navigator.userAgent.toLowerCase();
    if((navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || (agent.indexOf("msie") != -1)) {
        // ie 일때
        $input.replaceWith($input.clone(true));
        $preview.empty();
    } else {
        //other
        $input.val("");
        $preview.empty();
    }       
}
 
$(".btn-delete").click(function(event) {
    var $input = $(".inp-img");
    var $preview = $('#preview');
    resetInputFile($input, $preview);
});
</script>