[JavaScript] 첨부파일 등록

 

프론트단에서 첨부파일을 등록하고 리스트를 뿌려주는 코드입니다. 

 

 

See the Pen by green526 (@green526) on CodePen.

 

 

 

 

▶ 코드 

HTML

<div class="insert">
    <form action="" method="POST" onsubmit="return false;">
        <button class="add-button" onclick="addFile();">Add File</button>
        <div class="file-list"></div>
    </form>
</div>

 

CSS

.insert {
    padding: 20px 30px;
    display: block;
    width: 600px;
    margin: 5vh auto;
    height: 90vh;
    border: 1px solid #dbdbdb;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.insert .file-list {
    height: 200px;
    overflow: auto;
    border: 1px solid #989898;
    padding: 10px;
}
.insert .file-list .filebox p {
    font-size: 14px;
    margin-top: 10px;
    display: inline-block;
}
.insert .file-list .filebox .delete i{
    color: #ff5353;
    margin-left: 5px;
}

 

 

Javascript

var fileNo = 0;

/* 첨부파일 추가 */
function addFile(){
    var num = 5;   // 최대 첨부파일 개수
    var fileCnt = document.querySelectorAll('.name');
    if (fileCnt.length < num) {
        var fileId = 'file' + fileNo++;
        
        var htmlData = '';
        htmlData += '<div id="' + fileId + '" class="filebox">';
        htmlData += '   <input type="file" name="file" onchange="changeFile(this);" hidden />';
        htmlData += '</div>';

        $('.file-list').append(htmlData);
        $('#' + fileId + ' input').click();
    } else {
        alert("첨부할 수 있는 최대 파일 개수는 " + num + "개 입니다.");
    }
}

/* 첨부파일 적재 */
function changeFile(obj){
    var result = validation(obj);
    if (result === false) {
        deleteFile(obj);
    } else {
        let htmlData = '';
        htmlData += '<p class="name">' + result + '</p>';
        htmlData += '<a class="delete" onclick="deleteFile(this);"><i class="far fa-minus-square"></i></a>';
        $(obj).parent().append(htmlData);
    }
}

/* 첨부파일 검증 */
function validation(obj){
    var fileName = obj.value.substring(obj.value.lastIndexOf('\\') + 1, obj.length);    // 파일명
    var fileExt = obj.value.substring(obj.value.lastIndexOf('.') + 1).toLowerCase();    // 확장자

    if (fileName.length > 100) {
        return false;
    } else if (obj.files && obj.files[0].size > (100 * 1024 * 1024)) {
        return false;
    } else if (obj.value.lastIndexOf('.') == -1) {
        return false;
    } else if (fileExt == "exe" || fileExt == "com" || fileExt == "bat" || fileExt == "msi") {
        return false;
    } else if (fileExt != "jpg" && fileExt != "gif" && fileExt != "png" && fileExt != "jpeg" && fileExt != "bmp" && fileExt != "tif" && fileExt != "pdf") {
        return false;
    } else {
        return fileName;
    }
}

/* 첨부파일 삭제 */
function deleteFile(obj) {
    obj.parentElement.remove();
}

 

 

 

참고 

https://as-you-say.tistory.com/124

[HTML + JQuery] 파일 여러개 업로드를 위한 썸네일 파일첨부 만들기