반응형
Image Upload with Preview and Delete
http://stackoverflow.com/questions/10206648/image-upload-with-preview-and-delete/10206834#10206834
모바일에서 브라우저로 파일 업로드 할때 미리보기 기능 구현.
html5 에서 모바일브라우저상의 <input type="file" >을 지원 할때 사용 가능하다.
아래의 Demo가 실행이 되는 브라우저에서는 적용 가능하겠다.
Demo : http://plungjan.name/test/previewjq.html
| <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Image preview</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif"; function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img_prev') .attr('src', e.target.result) .height(200); }; reader.readAsDataURL(input.files[0]); } else { var img = input.value; $('#img_prev').attr('src',img).height(200); } $("#x").show().css("margin-right","10px"); } $(document).ready(function() { $("#x").click(function() { $("#img_prev").attr("src",blank); $("#x").hide(); }); }); </script> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } #x { display:none; position:relative; z-index:200; float:right} #previewPane { display: inline-block; } </style> </head> <body> <section> <input type='file' onchange="readURL(this);" /><br/> <span id="previewPane"> <img id="img_prev" src="#" alt="your image" /> <span id="x">[X]</span> </span> </section> </body> </html> |
반응형
'프로그래밍 > Script' 카테고리의 다른 글
| [javascript] Meteor - nodejs . meteor (0) | 2013.03.20 |
|---|---|
| [jQuery] Collection of jQuery Drag and Drop Plugins (0) | 2013.03.20 |
| [jquery] 13 Very Useful jQuery Modal Plugins (0) | 2013.03.18 |
| [javascript] Holder.js (0) | 2013.03.11 |
| [javascript] css3 video player , html5, javascript (0) | 2013.03.07 |