Programmingjavascript

Javascript FileReader 샘플

javascript

Javascript FileReader 샘플

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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) {
            //파일 읽어들이기를 성공했을때 호출되는 이벤트 핸들러
            console.log(e.target.result);
            $('#blah').attr('src', e.target.result);
            //이미지 Tag의 SRC속성에 읽어들인 File내용을 지정
            //(아래 코드에서 읽어들인 dataURL형식)
            }
            reader.readAsDataURL(input.files[0]);
            console.log(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>
Share