이미지 클릭했을 때, 또는 파일업로드가 아니라 다른 거 클릭했을 때 이미지 업데이트 되는 스크립트를 만들었다. 이것도 파일업로드 커스텀이라고 할 수 있지... 프로젝트를 진행하면서 반복적으로 이 기능을 써야 하는 부분들이 많이 있었다. 응용해야 하는 부분도 있었음. 근데 나는 돌머리라 그런지 응용이 제대로 되지 않는 것 같음. 그래서 정리하는 중... 주석만 빼고 붙여넣기 하고 id 랑 class만 바꾸면 여기저기 사용하기 쌉가넝ㅋ

🖥️허접한 코드

<div>
    <img id="uploadImage" src="" alt="업로드 이미지" onclick="document.getElementById('fileInput').click();">
    <input hidden type="file" id="fileInput" accept="image/*">
  </div>
  
  <!-- 스크립트 시작 -->
  
  <script>
// `fileInput`에 이벤트 리스너를 추가하여 파일 선택 상태가 변경될 때 함수 호출
document.getElementById('fileInput').addEventListener('change', function(event) {
  // 사용자가 선택한 첫 번째 파일을 가져옴
  const file = event.target.files[0];
  
  // 선택된 파일이 이미지 파일인지 확인 (파일 타입이 'image/'로 시작하는지 체크)
  if (file && file.type.startsWith('image/')) {
    
    // 파일을 읽기 위한 FileReader 객체 생성
    const reader = new FileReader();
    
    // 파일 로딩이 완료되었을 때 실행될 이벤트 핸들러 설정
    reader.onload = function(e) {
      // 파일의 데이터 URL이 로드되면 이미지 태그의 소스로 설정하여 이미지 표시
      document.getElementById('uploadImage').src = e.target.result;
    };
    
    // FileReader로 파일의 데이터 URL 읽기 시작
    reader.readAsDataURL(file);
  }
});
  </script>