파일 업로드로 이미지를 선택하면 선택한 이미지를 div에 넣어 미리보기를 할 수있는 코드 입니다.
어떤 블로그에서 가져와서 좀 수정했는데.. 블로그 주소를 잊어버려서 ㅠ 원 제작자분께 사과의 말씀 드리고 이런 좋은 코드는 널리 퍼졌으면 해서 올립니다.
혹시라도 이 글을 보시고 답글 달아주시면 사이트 링크 걸겠습니다.
제가 확인해본 브라우져는 ie8, ie9, Chrome입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <script type="text/javascript"> function previewImage(targetObj, previewId) { var preview = document.getElementById(previewId); //div id var ua = window.navigator.userAgent; if (ua.indexOf("MSIE") > -1) {//ie일때 targetObj.select(); try { var src = document.selection.createRange().text; // get file full path var ie_preview_error = document .getElementById("ie_preview_error_" + previewId); if (ie_preview_error) { preview.removeChild(ie_preview_error); //error가 있으면 delete } var img = document.getElementById(previewId); //이미지가 뿌려질 곳 img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"; 이미지 로딩, sizingMethod는 div에 맞춰서 사이즈를 자동조절 하는 역할 } catch (e) { if (!document.getElementById("ie_preview_error_" + previewId)) { var info = document.createElement("<p>"); info.id = "ie_preview_error_" + previewId; info.innerHTML = "a"; preview.insertBefore(info, null); } } } else { //ie가 아닐때 var files = targetObj.files; for ( var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /image.*/; //이미지 파일일경우만.. 뿌려준다. if (!file.type.match(imageType)) continue; var prevImg = document.getElementById("prev_" + previewId); //이전에 미리보기가 있다면 삭제 if (prevImg) { preview.removeChild(prevImg); } var img = document.createElement("img"); 크롬은 div에 이미지가 뿌려지지 않는다. 그래서 자식Element를 만든다. img.id = "prev_" + previewId; img.classList.add("obj"); img.file = file; img.style.width = '50px'; //기본설정된 div의 안에 뿌려지는 효과를 주기 위해서 div크기와 같은 크기를 지정해준다. img.style.height = '50px'; preview.appendChild(img); if (window.FileReader) { // FireFox, Chrome, Opera 확인. var reader = new FileReader(); reader.onloadend = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } else { // safari is not supported FileReader //alert('not supported FileReader'); if (!document.getElementById("sfr_preview_error_" + previewId)) { var info = document.createElement("p"); info.id = "sfr_preview_error_" + previewId; info.innerHTML = "not supported FileReader"; preview.insertBefore(info, null); } } } } } </script> </head> <body> <input type="file" onchange="previewImage(this,'previewId')"> <div id='previewId' style='width: 50px; height: 50px; color: black; font-size: 9pt; border: 2px solid black; position: absolute; left: 300px; top: 200px;'> </div> </body> </html>
'Programming > 과거포스팅' 카테고리의 다른 글
| 안드로이드 구글 맵 연동_2(Android GoogleMap) (0) | 2012.10.16 |
|---|---|
| 안드로이드 구글 맵 연동_1 (구글맵 키 발급) (0) | 2012.10.16 |
| java unzip (0) | 2012.05.03 |
| C2DM Message Send (Server logic) (0) | 2012.04.25 |
| C2DM 연동 AUTH값 받아오기 (4) | 2012.04.23 |
