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 | <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> </head> <body> <!-- 이미지 파일만 등록되게 accept 확장지 지정 --> <div id="preview"></div><input type="file" name="" class="inp-img" accept=".gif, .jpg, .png"> <span class="btn-delete">삭제</span> <script src="lib/jquery/2.2.3/jquery.min.js"></script> <script type="text/javascript"> // 등록 이미지 등록 미리보기 function readInputFile(input) { if(input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#preview').html("<img src="+ e.target.result +">"); } reader.readAsDataURL(input.files[0]); } } $(".inp-img").on('change', function(){ readInputFile(this); }); // 등록 이미지 삭제 ( input file reset ) function resetInputFile($input, $preview) { var agent = navigator.userAgent.toLowerCase(); if((navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || (agent.indexOf("msie") != -1)) { // ie 일때 $input.replaceWith($input.clone(true)); $preview.empty(); } else { //other $input.val(""); $preview.empty(); } } $(".btn-delete").click(function(event) { var $input = $(".inp-img"); var $preview = $('#preview'); resetInputFile($input, $preview); }); </script> </body> </html> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] hasClass 클래스 여러개 체크 하기? - is 메서드로 해결 (0) | 2019.03.21 |
|---|---|
| [jQuery] wrapAll - 선택요소 4개씩 묶어 부모요소 wrap으로 감싸기, 반복문 4의 배수 (0) | 2019.01.09 |
| [jQuery] css 배경이미지 넓이 높이 사이즈 얻기 - image load event (0) | 2017.09.22 |
| [jQuery] 자식 선택자를 못찾을때 - p 태그가 가질수 있는 요소 확인 (0) | 2017.06.06 |
| [jQuery] $.unique() - DOM 요소 배열에서 중복요소 제거 (0) | 2017.05.01 |
