업로드한 이미지를 미리보기하는 방법!
참고!
기본 이미지를 클릭하면 파일 업로드 창이 뜨도록 작업하였다.
<!-- default image -->
<!-- Click on the image to open the file upload popup. -->
<label for="profile" class="form-label">
<img src="/default.png" id="myImg">
</label>
<!-- file upload input -->
<input type="file" id="profile"
style="display: none"
accept="image/*"
onchange="document.getElementById('myImg').src = window.URL.createObjectURL(this.files[0])" />
코드 설명!
<!-- 라벨안에 이미지를 넣어 이미지를 클릭하면 파일 업로드 창이 뜨도록하였다. -->
<!-- label의 for="" 에는 file input의 id값이 들어가야한다. -->
<label for="profile" class="form-label">
<img src="/default.png" id="myImg">
</label>
<!-- 파일 업로창 -->
<input type="file" id="profile"
style="display: none" // 파일 업로드 버튼을 숨기기 위함
accept="image/*" // 이미지만을 받기위함
onchange="document.getElementById('myImg').src = window.URL.createObjectURL(this.files[0])" />
// 파일이 업로드 되는 경우 해당 파일의url을 기본이미지의 src로 변경해준다.
**** 결과 ****
기본이미지를 클릭하면 아래 처럼 이미지 업로드창이 뜨고
업로드한 강아지 이미지가 잘 뜨는걸 볼 수 있다!
두번째 방법!
Jquery 사용하기! 흐름은 똑같음.
$("input[type='file']").change(function(){
$("#myImg").attr('src', URL.createObjectURL(this.files[0]));
});