파일 업로드 버튼 바꾸기

woodisco 2023. 7. 1. 13:30

<body>
    <div class="layout">
        <form action="/board/uploadPro" method="post" enctype="multipart/form-data">
            <div class="row">
                <div>
                    <input type="text" name="filepath" id="filepath" value="">
                </div>
                <div>
                    <label for="file">
                        <div class="btn-upload">...</div>
                    </label>
                    <input type="file" name="file" id="file" onchange="fileUpload()">
                    <button type="submit">アップロード</button>
                </div>    
            </div>
        </form>
    </div>
</body>

<style>
    .layout {
        width : 500px;
        margin : 0 auto;
        margin-top : 40px;
    }

    .btn-upload {
      width: 50px;
      background: #fff;
      border: 1px solid rgb(77,77,77);
      border-radius: 10px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover {
        background: rgb(77,77,77);
        color: #fff;
      }
    }

    #file {
      display: none;
    }
</style>

<script>
    function fileUpload() {
        // 파일경로 취득
        const applyFile = document.getElementById("file").value;

        // filepath 삽입
        document.getElementById("filepath").value = applyFile;
    }
</script>

저작자표시 비영리 변경금지 (새창열림)