코딩하는 핑구

파일첨부를 하는데 파일선택과 선택된 파일없음이라는 문구가 너무 거슬려서

인풋 파일 태그 내용 변경해본 기록

단순하게 인풋 파일태그를 숨기고 다른 텍스트로 대체한 상태

<input type="file" id="imgUpload" onchange="previewFile()" style="display:none;"></input>
<label for="imgUpload">이미지 추가</label>

기존의 못생긴 파일 선택녀석을 이렇게 단순 라벨링을 할수있다

아래의 등록하기의 경우 내가 임의로 submit 기능의 버튼을 추가한것이니 걱정ㄴㄴ

라벨링에 css 커스터마이징을 추가한 다른 형태

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}
<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

참고 : https://stackoverflow.com/questions/572768/styling-an-input-type-file-button