[JavaScript] 첨부파일 다중파일 multiple 업로드 2

DataTransfer() 라는 함수를 쓰는 방법이다. 

해당 예제는 계속 파일을 누적으로 추가를 할 수는 없고 파일 추가를 계속 하게 되면 기존 파일은 리셋되고 새로운 파일로 바뀌는 것이다. 

 

 

코드는 어디서 건너건너 퍼온거고 내가 따로 덧붙여서 수정하진 않고 핵심 기능만 보여줌.

 

 

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

 

 

 

 

코드

html

<div class="insert">
    <form method="POST" onsubmit="return false;" enctype="multipart/form-data">
        <input type="file" onchange="addFile(this);" multiple />
        <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 selFile = document.querySelector("input[type=file]");

/* 첨부파일 추가 */
function addFile(obj){
    var files = obj.files;
    let htmlData = '';
    for (var i = 0; i < files.length; i++) {
        const file = files[i];
        // 목록 추가
        htmlData += '<div id="file' + i + '" class="filebox">';
        htmlData += '   <p class="name">' + file.name + '</p>';
        htmlData += '   <a class="delete" onclick="jsFunc.deleteFile(' + i + ');"><i class="far fa-minus-square"></i></a>';
        htmlData += '</div>';
    }
    document.querySelector('.file-list').innerHTML = htmlData;
}

/* 첨부파일 삭제 */
function deleteFile(num) {
    var dt = new DataTransfer()
    var { files } = selFile;

    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (num !== i) dt.items.add(file);
        selFile.files = dt.files;
    }

    document.querySelector("#file" + num).remove();
}