JQuery 다중 파일 업로드시 미리 보기 제공하기.
JQuery 다중 파일 업로드시 미리보기 삭제하기.
JQuery 다중 파일 업로드시 POST 전송.
JQuery 다중 파일 업로드시 서버에 파일 전송.
완성 코드 버전입니다.
https://greatps1215.tistory.com/31
저번 포스팅에 이어서 이번엔 다중 파일 업로드 과정에 대해서 포스팅 해봅니다.
1. 다중 파일 선택시 미리보기 제공
2. 다중 파일 미리보기에서 특정 이미지만 삭제하기
3. 다중 파일 POST 전송
4. 다중 파일 서버 디렉토리로 업로드하기
순으로 진행될 예정입니다.
전체 소스코드는 압축해서 올리도록 하겠습니다.
아래는 body부분입니다 한번 보시고 포스팅을 보시는게 이해하는데 도움이 되실 겁니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <body> <div> <h2><b>이미지 미리보기</b></h2> <div class="input_wrap"> <a href="javascript:" onclick="fileUploadAction();" class="my_button">파일 업로드</a> <input type="file" id="input_imgs" multiple/> </div> </div> <div> <div class="imgs_wrap"> <img id="img" /> </div> </div> <a href="javascript:" class="my_button" onclick="submitAction();">업로드</a> </body> | cs |
1. 다중 파일 선택시 미리보기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <script type="text/javascript"> // 이미지 정보들을 담을 배열 var sel_files = []; $(document).ready(function() { $("#input_imgs").on("change", handleImgFileSelect); }); function fileUploadAction() { console.log("fileUploadAction"); $("#input_imgs").trigger('click'); } function handleImgFileSelect(e) { // 이미지 정보들을 초기화 sel_files = []; $(".imgs_wrap").empty(); var files = e.target.files; var filesArr = Array.prototype.slice.call(files); var index = 0; filesArr.forEach(function(f) { if(!f.type.match("image.*")) { alert("확장자는 이미지 확장자만 가능합니다."); return; } sel_files.push(f); var reader = new FileReader(); reader.onload = function(e) { var html = "CONTENT"; $(".imgs_wrap").append(html); index++; } reader.readAsDataURL(f); }); } </script> | cs |
저번 단일 이미지 미리보기 포스팅 내용과 기본적으로 비슷하지만 다른점으로는 배열로 해당 파일들을 관리한다는 점입니다.
물론 관련 부분에 관해서는 좀더 고급스러운 코드로 작성이 가능하겠습니다만,
제가 이해하고 활용 가능한 부분에 대해서
포스팅 하니 이점은 양해 부탁드리겠습니다.
Line4, Line19~Line20 : 다중 이미지 관련에 대해서는 배열로 관리를 하게 됩니다,
Line 19~20에 관련되서는 handler의 이벤트가 발생하게 되면 기존의 이미지 정보들을 모두 초기화 하는 기능을 합니다.
Line11 : input[type=file] multiple의 태그를 숨기고 버튼으로 작동하게 onclick속성으로 연결해놓은 함수입니다.
이부분은 저처럼 안해도 무방합니다. 다반 저는 미관상으로 작성한 부분입니다.
Line36 : CONTENT 내용은 이해하기 쉽게 따로 빼놨습니다.
1 | var html = "<a href=\"javascript:void(0);\" onclick=\"deleteImageAction("+index+")\" id=\"img_id_"+index+"\"><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selProductFile' title='Click to remove'></a>"; | cs |
위의 소스코드는 위에 생략한 CONTENT 내용입니다.
풀어서 설명 드리면 a태그로 감싸고 안에 img태그를 삽입하였습니다.
완성된 html코드는 imgs_wrap에 삽입하였습니다.
a태그에 대해 조금더 이해해보실 필요가 있습니다.
다음 항목에 설명할 이미지를 선택하면 여러 미리보기 이미지들 중에 선택된 이미지만 삭제가 되기 위해
onclick을 속성으로 연결하였고, 해당 function에는 index로 이미지들을 구별할 수 있는 고유값을 매개변수로 전달해줍니다.
물론 a태그에도 id 속성값을 주어서 script로 해당 a 태그를 삭제할 수 있도록 하였습니다.
2. 다중 파일 미리보기에서 특정 이미지만 삭제하기
1번의 예제에서 보여졌듯이 여러 이미지들을 파일업로드 버튼을 통해 실행하게 되면, 위의 내용과 같이 선택된 이미지들이 나열 됩니다.
특정 이미지를 삭제하는 함수는 위에 1번 항목에서 Line36의 내용을 참고 하시면 됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> function deleteImageAction(index) { console.log("index : "+index); sel_files.splice(index, 1); var img_id = "#img_id_"+index; $(img_id).remove(); console.log(sel_files); } </script> |
해당 이미지를 선택하게 되면 호출되는 함수입니다. 매개변수로 index를 받아
해당 img_id_index를 가지는 a 태그를 삭제하여 화면상에서 사라지게 하고,
배열 중 해당 이미지가 포함된 인덱스를 삭제 해줍니다. splice 함수를 검색해보시면 더욱 이해가 빠르실겁니다.
3. 다중 파일 POST 전송
선택된 이미지들을 이제 서버로 업로드를 해봐야합니다.
화면에 보이는 업로드 버튼을 누르게 되면 서버로 보내는 POST관련 함수가 작동을 해야합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script type="text/javascript"> function submitAction() { var data = new FormData(); for(var i=0, len=sel_files.length; i<len; i++) { var name = "image_"+i; data.append(name, sel_files[i]); } data.append("image_count", sel_files.length); var xhr = new XMLHttpRequest(); xhr.open("POST","./study01_af.php"); xhr.onload = function(e) { if(this.status == 200) { console.log("Result : "+e.currentTarget.responseText); } } xhr.send(data); } </script> | cs |
해당 예제코드는 form 태그로 작동하지 않습니다.
XMLHttpRequest에 관련해서는 크게 복잡하지 않지만, 보다 확실한 이해를 원하시면
검색해보시는게 더욱 이해하지는데 도움이 되실 겁니다.
함수에 대해서 설명드리고 싶은 부분은
보여지는 이미지들을 어떻게 서버로 옮기는 post 기능을 포함해서 전송할 것인가 입니다.
Line5~Line9 : 보시면 for문으로 선택된 파일 배열의 크기만큼 반복이 되며,
data를 고유값으로 감싸게 됩니다. 즉 서버에서 쓰게될 값은 $_FIELS['image_1~'] 이런식으로 사용이 가능합니다.
추가로 설명을 드리면, 파일 말고 일반 데이터를 보내시게 된다면 $_POST['name'] 이런식으로도 응용이 가능합니다.
Line10 : 예제코드에서 빠지면 안되는 내가 서버에 post로 업로드하는 이미지의 갯수도 같이 보내줘야 합니다.
위의 라인은 php코드에서 $_FILES로 접근하여 사용 가능하며, Line10의 부분에 대해서는 $_POST['image_count']로 사용이 가능합니다.
이렇게 이미지들(각 index값으로 고유값을 줌)과 이미지들의 갯수를 서버에 Submit하는 함수가 작동합니다.
4. 다중 파일 서버 디렉토리로 업로드하기
대망의 마지막 항목입니다. 3에서 설명드렸던 submit이 진행되면 php의 코드는 어떤 루틴으로 작동하는지 설명드리겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?php $imageKind = array ('image/pjpeg', 'image/jpeg', 'image/JPG', 'image/X-PNG', 'image/PNG', 'image/png', 'image/x-png'); $dir = "./imgs/"; for($i=0; $i<$_POST['image_count']; $i++) { $image_id = "image_".$i; $image_file = time().$i.".jpg"; if(isset($_FILES[$image_id]) && !$_FILES[$image_id]['error']) { if(in_array($_FILES[$image_id]['type'], $imageKind)) { if(move_uploaded_file($_FILES[$image_id]['tmp_name'], $dir.$image_file)) { echo "Success Upload Image <br/>"; } else { echo "Error Upload Image <br/>"; } } else { echo "Not Image Type <br/>"; } } else { echo "Image Upload Fail <br/>"; } } ?> | cs |
Line6 : 3에서 data.append("image_count", sel_files.length()); 해서 post 전송을 했기 때문에, 받아서 활용합니다.
반복문으로 업로드 된 이미지 갯수 만큼 for문을 반복합니다.
Line8~Line9 : 3에서 POST전송한 파일ID와 중복되지 않게 time함수 + i로 파일명을 생성합니다. Line8을 활용하여 업로드 시킨 파일명을
$_FILES로 접근 할 수 있는 ID가 됩니다.
Line11~Line23 : $image_id를 활용하여 파일에 접근하고 move_uploaded_file로 서버 디렉토리로 파일을 업로드합니다.
해당 포스팅은 이것으로 마침니다. 설명이 많이 부족하고 전문적인 내용을 많이 담지 못해서 죄송합니다.
예제코드를 압축해서 올려놓았으니, 필요하신 분은 부디 도움이 많이 되시길 바랍니다.
결과화면
#Jquery다중이미지미리보기#Jquery다중이미지업로드#Jquery다중이미지삭제#Jquery다중이미지서버업로드
다중 업로드 파일 예제.zip지금 까지 댓글로 피드백들을 많이 주셔서 오류가 있거나 수정해야될 부분이 있는 경우 수정하였습니다.
컨텐츠 내에는 바뀐건 없지만 zip파일에는 반영이 되어있으니 참고바랍니다!
혹시 잘못된 정보로 인해 수정 요청을 하시거나, 다른 필요한 내용이 있으시면 댓글을 남겨주세요.
댓글 피드백은 확인 후 진행하겠습니다.
'개발 > HTML, CSS, Script' 카테고리의 다른 글
| 드랍다운 메뉴 (0) | 2017.09.30 |
|---|---|
| 슬라이드 메뉴, 슬라이딩 메뉴 (0) | 2017.09.30 |
| 이미지 반복 롤링 배너 (7) | 2017.09.24 |
| [Part1] Jquery 파일 업로드시 미리보기 제공하기, 다중 파일 업로드 미리보기 제공하기 (18) | 2017.05.15 |
| CSS 콘텐츠 수직정렬하기 (0) | 2017.05.04 |
