<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>