IE7에서 파일업로드 미리보기 기능
[출처 : PHPSchool]
쩝..IE7에서 보안이 강화되면서 미리보기 기능이 구현안돼서 헤매고 당기다 아지트에서 발견하다...
소스 :
invalid-file<html>
<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(sizingMethod=scale);
}
#previewPhotoGara {
width:115px;
height:150px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<script type="text/JavaScript">
<!--
function showPhoto(src) {
if(src.match(/\.(gif|jpg|jpeg|png)$/i)) {
// 복사용 개체에 그림 삽입하고 실제 크기 구하기
var obj = document.getElementById("previewPhotoGara");
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod=image)";
var w = obj.offsetWidth;
var h = obj.offsetHeight;
/*if(w > 115) { // 가로 길이가 115 이상일 경우만 축소하기
var x_axis = w / 115; // X축의 축소 비율 구하기
var y_axis = parseInt(h / x_axis); // X축이 들어든 만큼 Y축의 크기를 축소한다.
} else {
var y_axis = h;
}
// 썸네일 컨테이너의 크기 조정
document.getElementById("previewPhotoBox").style.width = '115px';
document.getElementById("previewPhotoBox").style.height = y_axis + 'px';
*/
// 썸네일에 그림 삽입하고 이상유무 첵~
document.getElementById("previewPhoto").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod=scale)";
} else {
alert("이미지 파일만 올려주세요");
}
}
function killPhoto() {
if(!confirm("사진을 취소하시겠습니까?")) return;
document.getElementById("filePhoto").outerHTML = document.getElementById("filePhoto").outerHTML;
document.getElementById("previewPhoto").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='noPhoto.gif',sizingMethod=scale)";
}
//-->
</script>
</head>
<body>
<DIV style="overflow:hidden; width:115px; height:150px"><!-- 썸네일 크롭핑 -->
<DIV id=previewPhotoBox style="width:115px; height:150px"><!-- 썸네일 컨테이너 -->
<DIV id=previewPhoto><!-- 썸네일 -->
</DIV>
</DIV>
</DIV>
<DIV style="overflow:hidden; width:1px; height:1px">
<DIV id=previewPhotoGara></DIV>
</DIV>
<input type=hidden id=verifyPhoto value=""><!-- 업로드 파일이 이미지 파일(jpg,gif)인지 최종판단 -->
<input type=file name=filePhoto id=filePhoto onchange="showPhoto(this.value)">
<input type=button value="사진취소" onclick="killPhoto()">
</body>
</html>
'Scripter > JAVASCRIPT' 카테고리의 다른 글
| IE6에서 CSS로 fixed로 했을경우 고정되지 안는 문제 (2) | 2008.05.12 |
|---|---|
| Mouse wheel programming in JavaScript (0) | 2008.05.08 |
| IE에서 Javascript 로컬 실행(ActiveX 창뜰때) (8) | 2008.04.17 |
| JSON에 대한 작은 단상 : JSON Diet (1) | 2008.04.16 |
| HTML include하기 (0) | 2008.04.15 |