이미지 드래그 앤 드롭 업로드 구현

다중 파일을 업로드 할 때 드래그 앤 드롭 할 수 있는 기능을 구현해보았다.

 

js

$('.content')
.on("dragover", dragOver)
.on("dragleave", dragLeave)
.on("drop", uploadFiles);

function dragOver(e) {
    e.stopPropagation();
    e.preventDefault();
    
    $(e.target).css({
        "background-color": "#fff",
        "outline-offset": "-30px",
        "outline": "2px dashed #ffb341",
        "color" : "#ffb341",
        "font-size" : "30pt"
    });
    
    let str = 'Drop';
    $(e.target).html(str);
}

function dragLeave(e) {
    e.stopPropagation();
    e.preventDefault();
    
    $(e.target).css({
        "background-color" : "#ffb341",
        "outline-offset" : "-20px",
        "outline" : "2px dashed #fff",
        "color" : "#fff",
        "font-size" : "14pt"
    });

    let str = '이미지를 드래그하거나 클릭하세요';
    $(e.target).html(str);
}

function uploadFiles(e) {

    e.stopPropagation();
    e.preventDefault();
    dragLeave(e);

    e.dataTransfer = e.originalEvent.dataTransfer; //2
    let files = e.target.files || e.dataTransfer.files;

    // 파일이 이미지가 아니거나 이름에 | 들어있으면 return
    for (file of files) {
        let file_name = file.name; // 파일 이름 구하기
        let ext = file_name.substring(file_name.lastIndexOf(".")+1); // 확장자 구하기
        ext = ext.toLowerCase(); // 소문자로 변환하기
        if (ext != 'jpg' && ext != 'jpeg' && ext != 'png') {
            alert("이미지만 업로드 가능합니다");
            return;
        }
        if(file_name.indexOf('|') != -1) {
            alert("파일 이름에 \'|\' 기호가 들어있으면 안됩니다");
            return;
        }
    }

    readFiles(files);
    return;
}



// 이미지 파일 업로드하는 함수
function readFiles(e) {

    const formData = new FormData();

    if (e.length > 0) {
        for (var i = 0; i < e.length; i++) {
            formData.append('image[]', e[i]);
        }
    }

    // 이미지 서버에 업로드
    $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url: "/goods/upload",
        type: "POST",
        data: formData,
        dataType: 'text',
        cache:false,
        contentType: false,
        processData: false,
        // 성공
        success : function(result) {

            // json 파싱
            result = JSON.parse(result);

            // 이미지 미리보기 생성
            for(i = 0; i < e.length; i++){
                var str = "";
                var tmp = e[i];
                var src = URL.createObjectURL(tmp);
                str  += '<li class="li">\n' + 
                            '<img class="li_image" src="' + src + '" alt="' + tmp.name + '"/>\n' +
                            '<span class="close_btn"><i class="fa fa-times-circle-o fa-2x" aria-hidden="true"></i></span>\n' +  
                            '<input type="hidden" class="file_name" value="' + result[i] + '">\n' + 
                        '</li>\n';
                $("#preview").append(str);
            }
        },
        // 실패
        error: function(request,status,error){ 
            alert("code = "+ request.status + " message = " + request.responseText + " error = " + error); 
            console.log("code = "+ request.status + " message = " + request.responseText + " error = " + error);
        }
    });


    // 이미지 개수 + 1
    let image_num = parseInt(document.getElementById("image_num").innerHTML);
    $("#image_num").html(image_num + 1);
}

 

 

css

.content{
    cursor: pointer;
    display : inline-block;
    outline: 2px dashed #ffffff;
    outline-offset:-20px;
    text-align: center;
    transition: all .15s ease-in-out;
    width: 100%;
    height: 240px;
    background-color: #ffb341;
    line-height:250px;
    color : #fff;
    font-size: 14pt;
}

#content_box {
    background :#ffd18b;
    height: 280px;
    text-align : center; 
    padding : 20px;
}

 

 

html

<div id="content_box">
    <div class="content">
        이미지를 드래그하거나 클릭하세요
    </div>
</div>

 

 

결과

 

 

참고 : https://kutar37.tistory.com/entry/HTML5-Javasciprt-DragDrop-%EA%B5%AC%ED%98%84-%EC%98%88%EC%A0%9C