new Image() 사용하기
작성자 : 단국강토
등록날짜 : 2009.02.19 10:38
2,052
** 자바스크립트
<script type="text/javascript" language="javascript">
// 화면에 보여지게 할 이미지의 크기를 정해준다.
var globalPic;
var maxWidth= 100; // 이미지의 폭
var maxHeight= 100; // 이미지의 높이
var fileTypes= ["bmp","gif","png","jpg","jpeg"]; // 유효한 파일 타입
var outImage= "previewField"; // 미리보기 필드 id
var defaultPic= "noImage.gif"; // 유효한 파일이 아닐 경우 보여주는 이미지
/*아래의 코드는 수정하지 마십시오.*/
function fnPreview(what,num) {
if ( num == 1 ) outImage = "previewField1";
if ( num == 2 ) outImage = "previewField2";
<script type="text/javascript" language="javascript">
// 화면에 보여지게 할 이미지의 크기를 정해준다.
var globalPic;
var maxWidth= 100; // 이미지의 폭
var maxHeight= 100; // 이미지의 높이
var fileTypes= ["bmp","gif","png","jpg","jpeg"]; // 유효한 파일 타입
var outImage= "previewField"; // 미리보기 필드 id
var defaultPic= "noImage.gif"; // 유효한 파일이 아닐 경우 보여주는 이미지
/*아래의 코드는 수정하지 마십시오.*/
function fnPreview(what,num) {
if ( num == 1 ) outImage = "previewField1";
if ( num == 2 ) outImage = "previewField2";
var msg;
var source= what.value;
var ext= source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
for ( var i=0; i<fileTypes.length; i++ )
if (fileTypes[i]==ext) break;
globalPic= new Image();
if ( i<fileTypes.length ) globalPic.src = source;
else {
var source= what.value;
var ext= source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
for ( var i=0; i<fileTypes.length; i++ )
if (fileTypes[i]==ext) break;
globalPic= new Image();
if ( i<fileTypes.length ) globalPic.src = source;
else {
msg = "유효한 이미지 파일이 아닙니다.\n";
msg+= "아래타입의 이미지 파일을 선택하여 주십시오.\n";
msg+= fileTypes.join(", ");
globalPic.src = defaultPic;
alert(msg);
}
setTimeout("fnApplyChange()",200);
}
function fnApplyChange() {
var field= document.getElementById(outImage);
var x = parseInt(globalPic.width);
var y = parseInt(globalPic.height);
if ( x>maxWidth ) {
y *= maxWidth / x;
x = maxWidth;
}
if ( y>maxHeight ) {
x *= maxHeight / y;
y = maxHeight;
}
field.style.display = ( x<1 || y<1 )? "none":"";
field.src = globalPic.src;
field.width = x;
field.height= y;
}
</script>
** html 단
// 파일 이미지가 보이는 부분(흰여백의 사진파일을 만들어서 경로로 지정해준다.) <br />
<img id="previewField1" border="0" width="300" height="100" /><br />
// 파일 업로드 하는 부분<br />
<input type="file" name="upFile" onChange="fnPreview(this,1);" size="70" /><br />
globalPic.src = defaultPic;
alert(msg);
}
setTimeout("fnApplyChange()",200);
}
function fnApplyChange() {
var field= document.getElementById(outImage);
var x = parseInt(globalPic.width);
var y = parseInt(globalPic.height);
if ( x>maxWidth ) {
y *= maxWidth / x;
x = maxWidth;
}
if ( y>maxHeight ) {
x *= maxHeight / y;
y = maxHeight;
}
field.style.display = ( x<1 || y<1 )? "none":"";
field.src = globalPic.src;
field.width = x;
field.height= y;
}
</script>
** html 단
// 파일 이미지가 보이는 부분(흰여백의 사진파일을 만들어서 경로로 지정해준다.) <br />
<img id="previewField1" border="0" width="300" height="100" /><br />
// 파일 업로드 하는 부분<br />
<input type="file" name="upFile" onChange="fnPreview(this,1);" size="70" /><br />
[출처]항해자
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
|
| ☞자세히보기 |
|
|
|
