SIR

jquery로 드래그&드롭 멀티 파일 첨부하기 > 그누보드5 팁자료실

그누보드5 팁자료실

jquery로 드래그&드롭 멀티 파일 첨부하기 정보

jquery로 드래그&드롭 멀티 파일 첨부하기

본문


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function fileDragEnter(event){
    event.stopPropagation();
    event.preventDefault();
    // 드롭다운 영역 css
    $(this).css('background-color','#E3F2FC');
}
function fileDragLeave(event){
     event.stopPropagation();
    event.preventDefault();
    // 드롭다운 영역 css
    $(this).css('background-color','#E3F2FC');
}
function fileDragOver(event){
    event.stopPropagation();
    event.preventDefault();
    // 드롭다운 영역 css
    $(this).css('background-color','#E3F2FC');
}
function fileDrop(ev){
    ev.preventDefault();
    // 드롭다운 영역 css
    $(this).css('background-color','#FFFFFF');
    var files = ev.target.files||ev.dataTransfer.files;
    var strHtml="";
    $("#files").html("");
    $("input[type='file']")
    .prop("files",files)  // put files into element
    .closest("form")
    for(var i=0;i<files.length;i++){
        strHtml+=files[i].name+"<br/>";
        var reader = new FileReader();
        reader.readAsDataURL(files[i]);
        reader.onload = function (e) {
            
        }
    }
    $("#file-div").html(strHtml);
    if(files != null){
            if(files.length < 1){
                    alert("폴더 업로드 불가");
                    return;
            }
            //selectFile(no,cnt,files)
    }else{
            alert("ERROR");
    }
}
</script>
<input type="file" name="file[]" id="file" multiple style="display:none" onchange="fileDrop(event)">
    <div style="width:100%;border:2px dashed #f0f0f0;height:400px;overflow-y:scroll" id="file-div" onclick="$('#file').click();" ondragenter="fileDragEnter(event)" ondragleave="fileDragLeave(event)" ondragover="fileDragOver(event)" ondrop="fileDrop(event)">
        드래그해서 파일첨부를 하거나 또는 클릭해서 파일 첨부 하시길 바랍니다.
</div>

 

ajax는 알아서 작업하시면 됩니다 ^^

추천3

댓글 전체

전체 1,778 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

진행중 포인트경매

  1. 참여6 회 시작21.01.19 10:50 종료21.01.24 10:50
  2. 참여52 회 시작21.01.16 18:00 종료21.01.23 18:00
  3. 참여24 회 시작21.01.16 12:00 종료21.01.23 12:00

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT