Front-End/jQuery
jquery로 input file로 이미지 선택 시 바로 보이게 하기
@deveely
2018. 9. 17. 20:59
|
<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 |