이미지 업로드시 미리보기(파일크기, 가로세로 크기 제한)
컨텐츠 정보
- 26,506 조회
- 9 추천
- 목록
본문
우선 이미지 미리보기 (파일크기 구하기)
<script language='javascript'>
<!--
function fileSize() {
alert(document.aaa.pre.fileSize);
}
function dreamkos_imgview()
{
img_pre = 'pre';
if(event.srcElement.value.match(/(.jpg|.jpeg|.gif|.png)/)) {
document.images[img_pre].src = event.srcElement.value;
document.images[img_pre].style.display = '';
}
else {
document.images[img_pre].style.display = 'none';
}
}
//-->
</script>
</head>
<body>
<table bgcolor='#e4e9de' border='1' bordercolordark='#ffffff' bordercolorlight='#bccad5' cellspacing='0' cellpadding='1'>
<form name="aaa">
<tr>
<td><font color=green>♤</font> 이미지를 선택하십시요. <font color=green>♤</font></td>
</tr>
<tr>
<td><input type='file' name='dreamkos_file' size='32' onChange='dreamkos_imgview()'></td>
</tr>
<tr>
<td><img id='pre' style='display:none;' border='0'></td>
</tr>
<a href="javascript:fileSize();">aaa</a>
</form>
</table>
</body>
------- 이미지 크기 제한 --------
<SCRIPT language="Javascript">
var limitedImgWidth = 50; // Limited width of a image
var limitedImgHeight = 50; // Limited height of a image
function isValid(oImg) {
try {
oImg.style.display = "inline";
if ((oImg.width > 0 && oImg.width <= limitedImgWidth) &&
(oImg.height > 0 && oImg.height <= limitedImgHeight)) return true;
else throw new Object("error");
} catch (e) {
oImg.style.display = "none";
alert(e + "\\r\\n" + "Illegal image object!");
}
return false;
}
function setNewImg(oElement) {
var oImg = document.getElementById("previewImg");
if (oElement.value != "") oImg.setAttribute("src", oElement.value);
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="previewImg" align="absmiddle" style="display:none" border="0"
onLoad="isValid(this);" onError="alert('Not image');">
<INPUT type="file" name="upImgPath" onChange="setNewImg(this);">
</BODY>
----------- 이미지 경로 숨기기 -------------
<img src='http://www.myezbook.com/superadmin/skin/blank.gif' style="background-image:url('http://blogfiles.naver.net/data2/2004/7/27/67/doll3-7230.jpg')" width=570 height=413 >
또는
<table border="0" cellpadding="0" cellspacing="0" background="http://i.imdb.com/Photos/Events/0157-ste/tyler_li.v"><td><img src="http://i.imdb.com/mptv1.gif" border="0" width="468" height="688"></td></tr></table>
출처: http://www.us.imdb.com/gallery/granitz/0157-ste/Events/0157-ste/tyler_li.v?path=pgallery&path_key=Buell, Bebe
배경으로 이미지를 깔고, 투명한 이미지를 셀에 링크해서, 다른이름으로 저장하면,
엉뚱하게도 투명이미지가 저장되는 경우입니다. 소스를 분석하기 전에는,..
이미지를 받기 힘들겠죠.
물론 소스를 분석해서 받는수고를 하는사람에게는 이미지를 허락해줘야 겠죠 ^^
<script language='javascript'>
<!--
function fileSize() {
alert(document.aaa.pre.fileSize);
}
function dreamkos_imgview()
{
img_pre = 'pre';
if(event.srcElement.value.match(/(.jpg|.jpeg|.gif|.png)/)) {
document.images[img_pre].src = event.srcElement.value;
document.images[img_pre].style.display = '';
}
else {
document.images[img_pre].style.display = 'none';
}
}
//-->
</script>
</head>
<body>
<table bgcolor='#e4e9de' border='1' bordercolordark='#ffffff' bordercolorlight='#bccad5' cellspacing='0' cellpadding='1'>
<form name="aaa">
<tr>
<td><font color=green>♤</font> 이미지를 선택하십시요. <font color=green>♤</font></td>
</tr>
<tr>
<td><input type='file' name='dreamkos_file' size='32' onChange='dreamkos_imgview()'></td>
</tr>
<tr>
<td><img id='pre' style='display:none;' border='0'></td>
</tr>
<a href="javascript:fileSize();">aaa</a>
</form>
</table>
</body>
------- 이미지 크기 제한 --------
<SCRIPT language="Javascript">
var limitedImgWidth = 50; // Limited width of a image
var limitedImgHeight = 50; // Limited height of a image
function isValid(oImg) {
try {
oImg.style.display = "inline";
if ((oImg.width > 0 && oImg.width <= limitedImgWidth) &&
(oImg.height > 0 && oImg.height <= limitedImgHeight)) return true;
else throw new Object("error");
} catch (e) {
oImg.style.display = "none";
alert(e + "\\r\\n" + "Illegal image object!");
}
return false;
}
function setNewImg(oElement) {
var oImg = document.getElementById("previewImg");
if (oElement.value != "") oImg.setAttribute("src", oElement.value);
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="previewImg" align="absmiddle" style="display:none" border="0"
onLoad="isValid(this);" onError="alert('Not image');">
<INPUT type="file" name="upImgPath" onChange="setNewImg(this);">
</BODY>
----------- 이미지 경로 숨기기 -------------
<img src='http://www.myezbook.com/superadmin/skin/blank.gif' style="background-image:url('http://blogfiles.naver.net/data2/2004/7/27/67/doll3-7230.jpg')" width=570 height=413 >
또는
<table border="0" cellpadding="0" cellspacing="0" background="http://i.imdb.com/Photos/Events/0157-ste/tyler_li.v"><td><img src="http://i.imdb.com/mptv1.gif" border="0" width="468" height="688"></td></tr></table>
출처: http://www.us.imdb.com/gallery/granitz/0157-ste/Events/0157-ste/tyler_li.v?path=pgallery&path_key=Buell, Bebe
배경으로 이미지를 깔고, 투명한 이미지를 셀에 링크해서, 다른이름으로 저장하면,
엉뚱하게도 투명이미지가 저장되는 경우입니다. 소스를 분석하기 전에는,..
이미지를 받기 힘들겠죠.
물론 소스를 분석해서 받는수고를 하는사람에게는 이미지를 허락해줘야 겠죠 ^^
관련자료
댓글 0
등록된 댓글이 없습니다.
