아는 것이 좋은 것이다.

[jQuery] 이미지 미리보기 (ie9 이상,크롬 테스트완료) 본문

jQuery

[jQuery] 이미지 미리보기 (ie9 이상,크롬 테스트완료)

start0 2014. 5. 12. 10:34 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> New Document </title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>

        $(document).ready(function(){
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader(); //파일을 읽기 위한 FileReader객체 생성
                    reader.onload = function (e) {
                    //파일 읽어들이기를 성공했을때 호출되는 이벤트 핸들러
                        $('#blah').attr('src', e.target.result);
                        //이미지 Tag의 SRC속성에 읽어들인 File내용을 지정
                        //(아래 코드에서 읽어들인 dataURL형식)
                    }                   
                    reader.readAsDataURL(input.files[0]);
                    //File내용을 읽어 dataURL형식의 문자열로 저장
                }
            }//readURL()--
   
            //file 양식으로 이미지를 선택(값이 변경) 되었을때 처리하는 코드
            $("#imgInp").change(function(){
                //alert(this.value); //선택한 이미지 경로 표시
                readURL(this);
            });
         });
  
  </script>

</head>

<body>
    <form id="form1">
        <input type='file' id="imgInp" /><br/>
        <img id="blah" src="#" alt="your image" />
    </form>
     
</body>
</html>
저작자표시 비영리 변경금지

'jQuery' 카테고리의 다른 글

[jQuery] 제이쿼리 갤러리 스크립트 모음  (0) 2014.05.13
[jQuery] 하위메뉴 스크립트  (0) 2014.05.12
[jQuery] 제이쿼리 최신버전 인클루드  (0) 2014.05.12
[jQuery] tr 숨김처리 display:none  (2) 2014.05.10
[jQuery] 이미지 슬라이드, 페이드 전환 샘플  (0) 2014.05.09
공유하기 링크
'jQuery' Related Articles more
Comments