본문으로 바로가기
반응형
1
2
3
<img src="" id="preview"/>
 
<input type="file" id="img_select"/>
cs


위와 같은 상황에서 파일을 선택 시 id가 preview인 <img>태그에 이미지를 바로 보이도록 하겠다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#img_select').change(function(){
setImageFromFile(this, '#preview');
});
 
function setImageFromFile(input, expression) {
    if (input.files && input.files[0])
    {
        var reader = new FileReader();
 
            reader.onload = function (e) {
                $(expression).attr('src', e.target.result);
           }
           reader.readAsDataURL(input.files[0]);
     }
}
cs
 
반응형