[javascript] 입력 폼에서 특정 요소의 배경 이미지 변경하기

11 Dec 2023

javascript

먼저, HTML을 사용하여 입력 폼을 만듭니다. 여기에는 이미지를 업로드할 수 있는 입력 요소가 포함됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>이미지 업로드 폼</title>
</head>
<body>
  <form>
    <input type="file" id="imageUpload" accept="image/*">
    <div id="previewElement" style="width: 200px; height: 200px; background-color: #f0f0f0;"></div>
  </form>
  <script>
    // JavaScript 코드를 이곳에 추가합니다.
  </script>
</body>
</html>

그런 다음, 입력 폼에서 이미지를 선택하면 해당 이미지로 요소의 배경을 변경하는 JavaScript 코드를 추가합니다. 여기서는 change 이벤트를 사용하여 이미지가 선택될 때마다 실행될 함수를 정의합니다.

document.getElementById('imageUpload').addEventListener('change', function() {
  const file = this.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById('previewElement').style.backgroundImage = `url(${e.target.result})`;
    }
    reader.readAsDataURL(file);
  }
});

위의 코드에서는 FileReader를 사용하여 선택한 이미지를 읽고, 읽은 이미지의 URL을 요소의 backgroundImage로 설정합니다.

이제 당신의 웹 페이지를 열고 이미지를 선택하면 해당 이미지가 입력 폼의 요소의 배경으로 표시될 것입니다.

유용한 정보인가요? 페이지 미리보기 기능을 추가하는 방법에 대해 자세히 알고 싶다면 이것을 참고하세요. (https://developer.mozilla.org/en-US/docs/Web/API/FileReader)