1. jQuery
이미지 파일을 업로드를 할 때 업로드 할 이미지를 미리 볼 수 있는 js 예제 코드입니다.
Stack over flow 에서 가져온 코드입니다. ( 링크 )
<body>
<form action="" method="">
<input type='file' id="imgInp" />
<img id="foo"src="#" />
</form>
</body>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#foo').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});
<script>
2. Vanilla JS
let reader = new FileReader();
reader.onload = (readerEvent) => {
document.querySelector("#foo").setAttribute('src', readerEvent.target.result);
};
document.querySelector("#imgInp").addEventListener("change", (changeEvent) => {let imgFile = changeEvent.target.files[0];
reader.readAsDataURL(imgFile);
});
'웹 프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 무한 스크롤 (2) | 2018.04.21 |
|---|---|
| [jQuery] Ajax와 remove, append, after, val 메서드 (0) | 2017.12.07 |