이미지 업로드는 웹 개발에서 자주 사용되는 기능 중 하나입니다. 자바스크립트를 사용하여 동적으로 이미지를 업로드하는 방법을 알아보겠습니다. 이때, ‘this’ 키워드를 사용하여 현재 요소를 참조할 수 있습니다.

HTML 구조

먼저, 이미지를 업로드할 HTML 구조를 생성해야 합니다. 다음과 같이 input 요소와 이미지 미리보기를 표시할 img 요소를 포함한 형태입니다.

<input type="file" id="uploadInput">
<img id="previewImage" src="" alt="Preview Image">

자바스크립트 코드

이제 자바스크립트를 사용하여 동적으로 이미지를 업로드하고 미리보기를 표시하는 코드를 작성해보겠습니다. ‘this’ 키워드를 사용하여 현재 이벤트가 발생한 요소를 참조할 수 있습니다.

function handleImageUpload() {
    var fileInput = document.getElementById('uploadInput');
    var imagePreview = document.getElementById('previewImage');

    fileInput.addEventListener('change', function() {
        var file = this.files[0];
        var reader = new FileReader();

        reader.onload = function(e) {
            imagePreview.src = e.target.result;
        };

        reader.readAsDataURL(file);
    });
}

위의 코드에서, handleImageUpload 함수는 input 요소의 변화를 감지하여 이미지를 업로드하고 미리보기를 업데이트하는 역할을 수행합니다.

실행

이제 함수를 호출하여 이미지 업로드 처리를 시작할 수 있습니다. 다음 코드를 HTML 파일의 body 요소 안에 추가하면 됩니다.

<script>
    handleImageUpload();
</script>

위의 코드를 통해 사용자가 이미지를 선택하면 선택한 이미지가 미리보기 창에 표시됩니다.

이것은 ‘this’ 키워드를 이용한 자바스크립트에서의 동적 이미지 업로드 처리 방법입니다. ‘this’ 키워드를 사용하여 현재 이벤트 요소를 참조하고, FileReader를 이용하여 이미지를 읽고, 미리보기를 업데이트하는 방식으로 동적 이미지 업로드를 처리할 수 있습니다.

#javascript #이미지업로드