[JavaScript] 드래그 & 드롭

형태

 

html

<input type='file' id='btnAtt' name="file" multiple='multiple'/>
<div id='att_zone'>
    <p class="att_zone_p" >
        drag & drop
    </p>
</div>

 

css

#att_zone{
    width: 660px;
    height: 220px;
    padding:10px;
    border:1px dotted #00f;
}

.attach_div{
    display:inline-block;
    position:relative;
    width:100px;
    height:80px;
    margin:5px;
    border:1px solid #00f;
    z-index:1;
}

.attach_img{
    width:100%;
    height:100%;
}

.attach_input{
    width:25px;
    height:25px;
    position:absolute;
    font-size:20px;
    right:0px;
    bottom:0px;
    z-index:999;
    background-color:rgba(255,255,255,0.1);
    color:#f00;
    margin-bottom: 0px !important;
    border:1px solid black;
}

.attach_p{
    font-size: 12px;
    width: 100%;
    height: 15px;
    background: white;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.att_zone_p {
    position: absolute; 
    z-index: -2; 
    font-size: 2rem; 
    color: gray; 
    margin-left: 239px; 
    margin-top: 94px;
}

js

//파일업로드
const fileCount = 10 - ($('.attach_div') == null ? $('.attach_div').length :0);

function delDiv(result){
    const id= 'attach' +result;
    const delId=document.getElementById(id);

    delId.remove();
    fileCount++;
}
( /* att_zone : 이미지들이 들어갈 위치 id, btn : file tag id */
    imageView = function imageView(att_zone, btn){

        const attZone = document.getElementById(att_zone);
        const btnAtt = document.getElementById(btn)
        let sel_files = [];

        btnAtt.onchange = function(e){
            const files = e.target.files;
            const fileArr = Array.prototype.slice.call(files)
            for(let f of fileArr){
                imageLoader(f);
            }
        }
        // 탐색기에서 드래그앤 드롭 사용
        attZone.addEventListener('dragenter', function(e){
            e.preventDefault();
            e.stopPropagation();
        }, false)

        attZone.addEventListener('dragover', function(e){
            e.preventDefault();
            e.stopPropagation();

        }, false)

        attZone.addEventListener('drop', function(e){
            let files = {};
            e.preventDefault();
            e.stopPropagation();
            let dt = e.dataTransfer;
            files = dt.files;
            for(let f of files){
                imageLoader(f);
            }

        }, false)

        /*첨부된 이미리즐을 배열에 넣고 미리보기 */
        const imageLoader = function(file){
            sel_files.push(file);
            if(sel_files.length > fileCount){
                sel_files.pop();
                return;
            }
            const reader = new FileReader();
            reader.onload = function(ee){
                const img = document.createElement('img')
                img.setAttribute('class', "attach_img")
                img.setAttribute('onerror',"this.src='/img/imsiImg.png'")
                img.src = ee.target.result;

                attZone.appendChild(makeDiv(img, file));
            }
            reader.readAsDataURL(file);
        }

        /*첨부된 파일이 있는 경우 checkbox와 함께 attZone에 추가할 div를 만들어 반환 */
        const makeDiv = function(img, file){
            const dt = new DataTransfer();
            for(let f in sel_files) {
                let file = sel_files[f];
                dt.items.add(file);
            }
            btnAtt.files = dt.files;

            const div = document.createElement('div');
            div.setAttribute('class', "attach_div");

            const p = document.createElement('p');
            p.setAttribute('class', 'attach_p')
            p.innerText = file.name;



            const btn = document.createElement('input');
            btn.setAttribute('type', 'button');
            btn.setAttribute('value', 'x');
            btn.setAttribute('delFile', file.name);
            btn.setAttribute('class', "attach_input");

            btn.onclick = function(ev){
                const ele = ev.target;
                const delFile = ele.getAttribute('delFile');
                for(let i=0 ;i<sel_files.length; i++){
                    if(delFile == sel_files[i].name){
                        sel_files.splice(i, 1);
                        sel_files.sort();
                    }
                }

                const dt = new DataTransfer();
                for(let f in sel_files) {
                    let file = sel_files[f];

                    dt.items.add(file);
                }
                btnAtt.files = dt.files;
                let p = ele.parentNode;
                attZone.removeChild(p)
            }

            div.appendChild(img)
            div.appendChild(p)
            div.appendChild(btn)

            return div
        }
    }
)('att_zone', 'btnAtt')

 

통신 js 

let data = new FormData();
const fileInput = $('#btnAtt');
// fileInput 개수를 구한다.
for (let i = 0; i < fileInput.length; i++) {
    if (fileInput[i].files.length > 0) {
        for (let j = 0; j < fileInput[i].files.length; j++) {
            formData.append('file', $('#btnAtt')[i].files[j]);
        }
    }
}