Single
<div class="fileUpload">
<div class="fileUpload__inputBox">
<button class="formControl__clear display-none">첨부된 파일 삭제</button>
<input type="text" class="form__input fileUpload__fileName" placeholder="파일을 선택하세요" readonly>
</div>
<label class="fileUpload__labelBtn btn is-primary">
파일찾기
<input type="file" class="fileUpload__input">
</label>
</div>
<script>
//fileUpload Single
const fileUpload = document.querySelectorAll(".fileUpload__input");
fileUpload.forEach(item => {
item.addEventListener("change", function () {
let fileName = $(this)[0].files[0].name;
this.parentNode.parentNode.querySelector('.fileUpload__fileName').value = fileName;
if(this.parentNode.parentNode.querySelector('.fileUpload__fileName').value != "" ){
this.parentNode.parentNode.querySelector('.formControl__clear').classList.remove('display-none');
}
});
});
</script>
Multiple
<div class="fileUploadMultiple" id="multipleUploader"></div>
<script>
let multiUploader;
window.addEventListener("DOMContentLoaded", function () {
/*
const options = {
totalMaxSize : 0.5,
fileMaxSize : 0.1
};
const multiUploader = new dsMultiUpload('multipleUploader', options);
*/
multiUploader = new dsMultiUpload('multipleUploader');
});
</script>
File download
<div class="fileDownload">
<a href="#" class="fileDownload__link">fileName.pdf(1.56MB)</a>
</div>
<table class="table">
<colgroup>
<col style="width:15rem;">
<col>
</colgroup>
<tbody>
<tr>
<th>파일 다운로드</th>
<td>
<div class="fileDownload">
<a href="#" class="fileDownload__link">fileName.pdf(1.56MB)</a>
</div>
<div class="fileDownload">
<a href="#" class="fileDownload__link">fileName.pdf(1.56MB)</a>
</div>
</td>
</tr>
</tbody>
</table>