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);
});