JQuery 파일 업로드시 미리 보기 제공하기.
JQuery 다중 파일 업로드시 미리 보기 제공하기.
이번에 포스팅할 내용은 input type="file" 과 html5부터 사용 가능한 input type="file" multiple 속성에서
미리보기 기능과 미리보기 이미지를 삭제하는 포스팅 해봅니다.
완성 코드 버전입니다.
https://greatps1215.tistory.com/31
1. input[type="file"] 미리보기 제공하기.
2. input[type="file"] multiple 미리보기 제공하기.
1. input[type="file"] 미리보기 제공하기
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Start Up</title> <style type="text/css"> .img_wrap { width: 300px; margin-top: 50px; } .img_wrap img { max-width: 100%; } </style> <script type="text/javascript" src="./js/jquery-3.1.0.min.js" charset="utf-8"></script> <script type="text/javascript"> var sel_file; $(document).ready(function() { $("#input_img").on("change", handleImgFileSelect); }); function handleImgFileSelect(e) { var files = e.target.files; var filesArr = Array.prototype.slice.call(files); filesArr.forEach(function(f) { if(!f.type.match("image.*")) { alert("확장자는 이미지 확장자만 가능합니다."); return; } sel_file = f; var reader = new FileReader(); reader.onload = function(e) { $("#img").attr("src", e.target.result); } reader.readAsDataURL(f); }); } </script> </head> <body> <div> <h2><b>이미지 미리보기</b></h2> <p class="title">이미지 업로드</p> <input type="file" id="input_img" /> </div> <div> <div class="img_wrap"> <img id="img" /> </div> </div> </body> </html> |
결과 화면
2. input[type="file"] multiple 미리보기 제공하기.
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Start Up</title> <style type="text/css"> .imgs_wrap { width: 600px; margin-top: 50px; } .imgs_wrap img { max-width: 200px; } </style> <script type="text/javascript" src="./js/jquery-3.1.0.min.js" charset="utf-8"></script> <script type="text/javascript"> var sel_files = []; $(document).ready(function() { $("#input_imgs").on("change", handleImgsFilesSelect); }); function handleImgsFilesSelect(e) { var files = e.target.files; var filesArr = Array.prototype.slice.call(files); filesArr.forEach(function(f) { if(!f.type.match("image.*")) { alert("확장자는 이미지 확장자만 가능합니다."); return; } sel_files.push(f); var reader = new FileReader(); reader.onload = function(e) { var img_html = "<img src=\"" + e.target.result + "\" />"; $(".imgs_wrap").append(img_html); } reader.readAsDataURL(f); }); } </script> </head> <body> <div> <h2><b>다중 이미지 미리보기</b></h2> <p class="title">다중 이미지 업로드</p> <input type="file" id="input_imgs" multiple /> </div> <div> <div class="imgs_wrap"> </div> </div> </body> </html> |
결과 화면
차후에 삭제가 가능한 이미지 미리보기 소스코드와, php파일 업로드 하는 과정까지 보여드리겟습니다.
#Jquery이미지미리보기#Jquery다중이미지미리보기
혹시 잘못된 정보로 인해 수정 요청을 하시거나, 다른 필요한 내용이 있으시면 댓글을 남겨주세요.
댓글 피드백은 하루에 오전에 한번, 오후에 한번 확인 후 진행하겠습니다.
'개발 > HTML, CSS, Script' 카테고리의 다른 글
| 드랍다운 메뉴 (0) | 2017.09.30 |
|---|---|
| 슬라이드 메뉴, 슬라이딩 메뉴 (0) | 2017.09.30 |
| 이미지 반복 롤링 배너 (7) | 2017.09.24 |
| [Part2] Jquery 다중 파일 업로드 미리보기 제공하기, 삭제, POST업로드 (37) | 2017.08.06 |
| CSS 콘텐츠 수직정렬하기 (0) | 2017.05.04 |
