테스트 사이트 - 개발 중인 베타 버전입니다

멀티파일 업로드 질문 채택완료

아빠다 4년 전 조회 1,771

</p>

<p>나이스님이 올려주신 소스로 멀티업로드 구현 해보는 중인데 문제가 있어 질문 올립니다.</p>

<p>혹시 해결방법이 있으면 부탁합니다. 소스 내용은 아래와 같고 내용은 파일은 잘 올라가는데 수정이 안된다는 것이 문제 입니다. 첨부파일 를 삭제는 가능한데 추가가 안되네요~~</p>

<p>한개라도 이미지를 삭제하려면 다 지우고 다시 올려야 올라갑니다</p>

<p>소스는 아래와 같습니다</p>

<p><script src="<a href="https://code.jquery.com/jquery-3.2.1.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.2.1.min.js"></script></a>

<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+"
";

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개의 이미지만 다른 것으로 수정하려고 하면 안되네요...기존에 올린 이미지를 모두 삭제해야 다른 이미지로 수정이 가능합니다. 어디가 잘 못된걸까요!!</p>

<p>

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

답변 3개

채택된 답변
+20 포인트

멀티파일 업로드 기능을 쓰면 어쩔 수 없는 부분입니다.

나주에 추가로 업로드 하는 이미지가 몇 번 이미지인지 알 수 있게 해 주면 가능할 듯합니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

아빠다
4년 전
아~ 그렇군요~ 그런데 게시물당 수십장 씩 올려서 이미지 갤러리를 만들려고 하는데 처음 올렸다가 중간에 맘에 안드는 이미지가 있으면 교체하는 경우를 대비해야 할 듯해서요..
예를 들어 30장의 이미지를 한 개시물에 올렸을 경우 중간에 10번째 정도가 맘에 안들면 10번째만 교체하고 싶을 때도 있는데 ~현재는 30장 모두를 삭제하고 다시 올려야 해서요~
하여간 감사합니다...
엑스엠엘
4년 전
중간 10번째만 지울 수 있게
각 이미지 옆에 체크박스를 넣고 체크하면 지울 수 있게끔 하시고
새로 이미지 추가하는 것은 맨 뒤로 들어가게 한다면 쉽게 처리할 수 있겠네요.

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

카산
4년 전

첨부파일 처리하는 곳은 바꾼 곳이 없습니다.. 어디서 처리하는 지를 모르 거든요~ 위에 올린 소스처럼 write.skin.php 에서만 변경했습니다... 관심 갖고 계속 답변 주셔서 감사합니다~~

로그인 후 평가할 수 있습니다

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

카산
4년 전

~답변 감사합니다... 그런데 그게 제가 하고 싶은 것은 아래와 같아서요~~

현재도 임의로 삭제는 됩니다... 그런데 삭제하구 제일 나중이든 중간이든 삽입하려고 하면 등록이 안되네요..다 삭제하지 않는 이상은요~~

그리구 10개의 이미지는 예를 든거구요...더 많은 이미지를 등록하구 임의로 여기 저기 이미지를 제거하고 다른 것으로 교체하고 ~ 뭐 그런식으로 자유롭게 이미지를 삽입하고 삭제할 수 있도록 하구 싶거든요..

현재 그누의 게시판 글쓰기도 그렇게 되는 것으로 알고 있습니다만~

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

엑스엠엘
4년 전
첨부 파일 처리(저장)하는 부분도 소스를 변경하셨나요?
해당 부분 소스를 올려 보세요

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

답변을 작성하려면 로그인이 필요합니다.

로그인