<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<style type="text/css">
#previewPhoto {
width:100%;
height:100%;
position:absolute;
z-index:1;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='noPhoto.gif',sizingMethod=scale);
}
#previewPhotoTemp {
width:115px;
height:150px;
}
</style>
<script type="text/JavaScript">
<!--
function showPhoto(src) {
if(src.match(/\.(gif|jpg|jpeg)$/i)) {
var obj = document.getElementById("previewPhotoTemp");
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod=image)";
var w = obj.offsetWidth;
var h = obj.offsetHeight;
if(w > 115) { //image resize
var x_axis = w / 115;
var y_axis = parseInt(h / x_axis);
}
else { var y_axis = h; }
//size setting
document.getElementById("previewPhotoBox").style.width = '115px';
document.getElementById("previewPhotoBox").style.height = y_axis + 'px';
//image setting
document.getElementById("previewPhoto").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod=scale)";
document.getElementById("verifyPhoto").value = "Y";
}
else {
alert("gif, jpg, jpeg 형식의 파일만 첨부 가능 합니다.");
document.getElementById("verifyPhoto").value = "";
}
}
function killPhoto() {
if(!confirm("사진을 취소하시겠습니까?")) return;
document.getElementById("filePhoto").outerHTML = document.getElementById("filePhoto").outerHTML;
document.getElementById("verifyPhoto").value = "";
document.getElementById("previewPhoto").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='noPhoto.gif',sizingMethod=scale)";
}
//-->
</script>
</head>
<body>
<!-- Thumbnail Crop -->
<div style="overflow: hidden; width: 115px; height: 150px;">
<!-- Thumbnail Container -->
<div id="previewPhotoBox" style="width: 115px; height: 150px;">
<!-- Thumbnail -->
<div id="previewPhoto">
</div>
</div>
</div>
<div style="overflow: hidden; width: 1px; height: 1px;">
<div id="previewPhotoTemp">
</div>
</div>
<!--marga:verifyPhoto 값이 Y 일 때만 첨부파일 저장 로직을 실행 하세요-->
<input type="hidden" id="verifyPhoto" />
<input type="file" name="filePhoto" id="filePhoto" onchange="JavaScript:showPhoto(this.value);" />
<input type="button" value="사진취소" onclick="JavaScript:killPhoto();" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<style type="text/css">
#previewPhoto {
width:100%;
height:100%;
position:absolute;
z-index:1;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='noPhoto.gif',sizingMethod=scale);
}
#previewPhotoTemp {
width:115px;
height:150px;
}
</style>
<script type="text/JavaScript">
<!--
function showPhoto(src) {
if(src.match(/\.(gif|jpg|jpeg)$/i)) {
var obj = document.getElementById("previewPhotoTemp");
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod=image)";
var w = obj.offsetWidth;
var h = obj.offsetHeight;
if(w > 115) { //image resize
var x_axis = w / 115;
var y_axis = parseInt(h / x_axis);
}
else { var y_axis = h; }
//size setting
document.getElementById("previewPhotoBox").style.width = '115px';
document.getElementById("previewPhotoBox").style.height = y_axis + 'px';
//image setting
document.getElementById("previewPhoto").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod=scale)";
document.getElementById("verifyPhoto").value = "Y";
}
else {
alert("gif, jpg, jpeg 형식의 파일만 첨부 가능 합니다.");
document.getElementById("verifyPhoto").value = "";
}
}
function killPhoto() {
if(!confirm("사진을 취소하시겠습니까?")) return;
document.getElementById("filePhoto").outerHTML = document.getElementById("filePhoto").outerHTML;
document.getElementById("verifyPhoto").value = "";
document.getElementById("previewPhoto").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='noPhoto.gif',sizingMethod=scale)";
}
//-->
</script>
</head>
<body>
<!-- Thumbnail Crop -->
<div style="overflow: hidden; width: 115px; height: 150px;">
<!-- Thumbnail Container -->
<div id="previewPhotoBox" style="width: 115px; height: 150px;">
<!-- Thumbnail -->
<div id="previewPhoto">
</div>
</div>
</div>
<div style="overflow: hidden; width: 1px; height: 1px;">
<div id="previewPhotoTemp">
</div>
</div>
<!--marga:verifyPhoto 값이 Y 일 때만 첨부파일 저장 로직을 실행 하세요-->
<input type="hidden" id="verifyPhoto" />
<input type="file" name="filePhoto" id="filePhoto" onchange="JavaScript:showPhoto(this.value);" />
<input type="button" value="사진취소" onclick="JavaScript:killPhoto();" />
</body>
</html>
반응형
'Developer' 카테고리의 다른 글
| Regular Expressions Cheat Sheet (2) | 2009.07.02 |
|---|---|
| 정규표현 (0) | 2008.01.29 |
| 14 Tab-Based Interface Techniques (0) | 2007.04.18 |