HTML - input file 버튼 꾸미기

 이번 글에선 HTML 에서 기본적으로 제공하는 input 태그의 file 속성일 때의 모양을 바꿔보려고 한다.

열심히 구글링을 해본 결과 보안상의 문제로 직접 input 태그에 변경을 가할 수는 없다고 한다.

따라서 input 태그에 속성을 넣는 게 아닌 약간의 편법?을 이용해서 업로드 버튼처럼 보이게 만들어야 한다.

먼저, 파일의 이름을 출력할 가짜 input 태그를 넣자.

<input type="text" id="file_route" disabled="disabled" value="파일 선택">

value 에 안내 문구를 넣었고, disabled를 지정했기 때문에 커서를 옮겨도 아무 것도 할 수 없다.

잘 생성됐다.

이제 오른쪽 버튼과 "선택된 파일 없음" 문구를 없애고 새 버튼을 만들어야 하는데 label과 style 속성을 잘 활용해서 없애보자.

<input type="text" id="file_route" disabled="disabled" value="파일 선택">
<label for="upload_file" style="border: solid 1px black;">업로드</label>
<input type="file" id="upload_file" accept="image/*" required=true 
    style="position:absolute; clip:rect(0, 0, 0, 0);">

label 태그는 for 속성으로 연결한 id의 태그와 자신(라벨)을 연결해 준다. 즉, "업로드" 를 클릭해도 input 태그를 클릭한 것과 같은 동작을 하게 된다.

기존 input 태그의 style 값을 변경해 태그의 크기를 0으로 만들어 버렸다. clip 은 해당 object를 특정 부분만 출력되도록 하는 속성인데, 범위를 0 줘버렸으니 해당 버튼이 사라진 것과 동일한 효과다.(clip 은 position: absolute 에서 작동한다.)

<img src="고양이.jpg" id="img_section" style="width: 400px; height: 400px;">
    <br>
    <input type="text" id="file_route" disabled="disabled" value="파일 선택">
    <label for="upload_file" style="border: solid 1px black;">업로드</label>
    <input type="file" id="upload_file" accept="image/*" required=true 
    style="position:absolute; clip:rect(0, 0, 0, 0);">
    <script>
        const reader = new FileReader();

        reader.onload = (readerEvent) => {
            document.querySelector("#img_section").setAttribute("src", readerEvent.target.result);
        };

        document.querySelector("#upload_file").addEventListener("change", (changeEvent) => {

            const imgFile = changeEvent.target.files[0];
            reader.readAsDataURL(imgFile);
        })
    </script>

이전 글에서 만든 미리보기 코드에 추가해봤다.

---

---

잘 나온다!

이제 업로드 할 때마다 사진도 바뀌고, 업로드 버튼도 원하는 대로 꾸밀 수 있게 되었는데(업로드 버튼을 꾸미려면 label 태그를 꾸미면 된다.) 업로드한 파일 이름을 볼 수가 없다.

그럼 이제 마지막으로, 업로드된 파일의 name을 file_route input 의 value에 넣어주면 된다.

<script>
        const reader = new FileReader();

        reader.onload = (readerEvent) => {
            document.querySelector("#img_section").setAttribute("src", readerEvent.target.result);
        };

        document.querySelector("#upload_file").addEventListener("change", (changeEvent) => {

            const imgFile = changeEvent.target.files[0];
            reader.readAsDataURL(imgFile);

            const fileName = document.getElementById("file_route");
            fileName.value = imgFile.name;
            //파일 이름을 띄워줌
        })
    </script>

---

---

굳굳~

파일 업로드 버튼, 파일 이름 문구를 input file 태그가 아닌 다른 태그로 바꿔치기 했으므로 바뀐 두 태그에 대해 이것저것 style 을 넣어주면 입맞에 맞는 업로드 버튼을 만들 수 있다.