Django) JavaScripts를 이용한 상호작용(image 미리보기)

# 회원 가입 기능을 구현할 때 프로필 사진 등을 미리보기 하는 방법

회원가입 시 1번 파일 선택을 눌렀을 때 누른 사진이 무엇인지 바로 볼 수 있도록 동작하는 것을 구현하려 한다.

우리에게는 JavaScripts 몇 줄 만 있으면 가능하다! 

- 자바스크립트 부분, 전체코드는 아래를 확인

{% block extrajs %}
<script>
    // 이미지 파일이 입력되면 미리보기를 보여주는 함수
    document.getElementById('id_profile_img').onchange = function(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('image_preview');
            output.src = reader.result;
            output.style.display = 'block'; // 이미지를 보이게 합니다
        };
        reader.readAsDataURL(event.target.files[0]);
    };
</script>
{% endblock %}

 

- signup.html 전체 코드 - 

{% extends "base.html" %}

{% block title %}Signup{% endblock %}

{% block extrahead %}
<style>
    #image_preview {
        max-width: 200px; /* 이미지 크기 제한 */
        height: auto;
        display: none; /* 초기에는 이미지 보이지 않게 설정 */
    }
</style>
{% endblock %}

{% block content %}
<div class="signup-container">
    <h1>Sign Up</h1>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form.as_p }}
        <!-- profile_img 필드에 대해 개별적으로 수정할 필요가 있으면 여기서 조정 -->
        <img id="image_preview" alt="Your image will appear here.">
        <button type="submit">Sign up</button>
    </form>
</div>
{% endblock %}

{% block extrajs %}
<script>
    // 이미지 파일이 입력되면 미리보기를 보여주는 함수
    document.getElementById('id_profile_img').onchange = function(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('image_preview');
            output.src = reader.result;
            output.style.display = 'block'; // 이미지를 보이게 합니다
        };
        reader.readAsDataURL(event.target.files[0]);
    };
</script>
{% endblock %}