Programming/JavaScript
이미지 미리보기 소스
by 막이
2012. 9. 7.
왕.. 검색해서 찾음 대박- _-
이미지 미리 보기할려고 지지난달에 얼마나 쑈를 햇던가 ....ㅋㅋㅋㅋㅋㅋ
신기신기
|
<!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')";
} 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");
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> |
