2026, 새로운 도약을 시작합니다.

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

[code]

<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>

[/code]

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

|

댓글 2개

좋은자료 감사합니다.
감사합니다.. 그런데 문제가 있어 질문합니다
<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>
<?php for ($i=0; $is_file && $i<$file_count; $i++) { ?>
<div class="bo_w_flie write_div">
<div class="file_wr write_div">
<label for="bf_file_<?php echo $i+1 ?>" class="lb_icon"><i class="fa fa-folder-open" aria-hidden="true"></i><span class="sound_only"> 파일 #<?php echo $i+1 ?></span></label>
<input type="file" name="bf_file[]" id="bf_file_<?php echo $i+1 ?>" title="파일첨부 <?php echo $i+1 ?> : 용량 <?php echo $upload_max_filesize ?> 이하만 업로드 가능" class="frm_file " multiple style="display:none" onchange="fileDrop(event)">
</div>

<?php if ($is_file_content) { ?>
<input type="text" name="bf_content[]" value="<?php echo ($w == 'u') ? $file[$i]['bf_content'] : ''; ?>" title="파일 설명을 입력해주세요." class="full_input frm_input" size="50" placeholder="파일 설명을 입력해주세요.">
<?php } ?>

<?php if($w == 'u' && $file[$i]['file']) { ?>
<span class="file_del">
<input type="checkbox" id="bf_file_del<?php echo $i ?>" name="bf_file_del[<?php echo $i; ?>]" value="1"> <label for="bf_file_del<?php echo $i ?>"><?php echo $file[$i]['source'].'('.$file[$i]['size'].')'; ?> 파일 삭제</label>
</span>
<?php } ?>
</div>
<?php } ?>

<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>

위와 같이 write.skin.php 에 넣고 파일업로드 하면 잘 올라가는데 1개의 글에 올린 10개의 이미지중 1개만 삭제하고 다른 것으로 수정하려고 하면 1개씩 삭제는 되는 데 1개의 이미지만 다른 것으로 수정하려고 하면 안되네요...기존에 올린 이미지를 모두 삭제해야 다른 이미지로 수정이 가능합니다. 어디가 잘 못된걸까요!!

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

그누보드5 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,599
2741 4일 전 조회 128
2740 5일 전 조회 113
2739 1주 전 조회 217
2738 1주 전 조회 221
2737 1주 전 조회 185
2736 2주 전 조회 284
2735 3주 전 조회 290
2734 3주 전 조회 264
2733 1개월 전 조회 267
2732 1개월 전 조회 303
2731 1개월 전 조회 270
2730 1개월 전 조회 229
2729 1개월 전 조회 361
2728 1개월 전 조회 247
2727 1개월 전 조회 422
2726 1개월 전 조회 260
2725 1개월 전 조회 332
2724 1개월 전 조회 363
2723 1개월 전 조회 267
2722 1개월 전 조회 301
2721 1개월 전 조회 214
2720 2개월 전 조회 304
2719 2개월 전 조회 314
2718 2개월 전 조회 202
2717 2개월 전 조회 337
2716 2개월 전 조회 204
2715 2개월 전 조회 315
2714 2개월 전 조회 273
2713 2개월 전 조회 378
2712 2개월 전 조회 290
🐛 버그신고