336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
원래 이미지 미리보기를 하기 위해서는 이미지를 서버에 업로드를 한 후에 업로드된 이미지의 URL을 전달 받아 그 URL로 이미지 src에 세팅을 해주는 것으로 처리를 해야한다. 하지만 FileReader 라는 Javascript 객체가 생기면서 최신 브라우저에서는 서버에 이미지를 업로드 안해도 이미지 미리보기 기능을 구현할 수 있다. 해당 내용은 아래와 같습니다.
<html> <head> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script type="text/javascript"> $(function() { $("#imgInp").on('change', function(){ readURL(this); }); }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } </script> </head> <body> <form id="form1" runat="server"> <input type='file' id="imgInp" /> <img id="blah" src="#" alt="your image" /> </form> </body> </html>
위 소스의 적용 가능한 브라우저 스펙은 다음과 같습니다.
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 3.6 (1.9.2) | 7 | 10 | 12.02 | 6.0.2 |
'Programming' 카테고리의 다른 글
| [python web framework] Getting Started with django (0) | 2014.11.21 |
|---|---|
| virtualbox ubuntu 14.10 설치 시 속도 빠르게 하는 법 (0) | 2014.11.20 |
| 자바스크립트:차트 종류별 예제 및 설명(Javascript: Chart.js Sample & Description) (0) | 2014.11.07 |
| 자바스크립트: 차트 및 그래프를 그려보자(Javascript: Introduce Chart.js) (0) | 2014.11.04 |
| redmine 이관 작업 시 NoMethodError 날 때 처리 방법 (0) | 2014.04.16 |
| DB tools > dbeaver 에서 테이블 복사 시 문제점 해결 방안 (0) | 2014.03.26 |
| postgres timestamp update (0) | 2014.02.12 |
| gitlab + nginx 설치 시 502 bad gateway 일 경우 해결 방안 (0) | 2014.02.05 |
| nodejs-gcm 에서 'ReferenceError: statusCode is not defined' 라고 오류가 날 때 (0) | 2014.01.27 |
| eclipse 에서 share project 가 안 보일 때 (0) | 2014.01.20 |
