이미지 업로드전에 미리보기

자신의 컴퓨터에있는 이미지를 업로드전에 미리볼수가 있습니다.
보통 업로드될 이미지를 원래의사이즈로 보게될 경우는 없으니 적당한 사이즈로 줄여주는 기능까지 되며 그림파일 여부도 판단할수가 있습니다.

응용은 알아서 하시기 바랍니다.


<script language="javascript">
var miniimg;

function FreeView(url)
{
if (url == "")
{
return;
}
else
{
var str = url.toLowerCase();
alert (str.substring((str.length)-3));

if (str.substring((str.length)-3) != "jpg" && str.substring((str.length)-3) != "gif" && str.substring((str.length)-3) != "png")
{
alert ("그림파일( JPG , GIF , PNG )만 업로드 가능합니다.");
}
else
{
miniimg = new Image();
miniimg.src = (url);

FreeView1();
}
}
}

function FreeView1()
{
if (miniimg.width != 0 && miniimg.height != 0) {
FreeView2();
}
else {
setTimeout("FreeView1();", 20);
}
}

function FreeView2()
{
var per = "";
var pre_w = "";
var pre_h = "";
var width = miniimg.width;
var height = miniimg.height;
var mywidth = 160;
var myheight = 142;

if (width > height) // 가로방향 이미지
{
per = mywidth / width;
pre_w = parseInt(width*per);
pre_h = parseInt(height*per);

if (pre_h > myheight) // 가로를 160 으로 줄였는데 세로가 142 를 이 넘을때.
{
per = myheight / height;
pre_w = parseInt(width*per);
pre_h = parseInt(height*per);
}
}
else // 세로방향 이미지 142 픽셀제한
{
per = myheight / height;
pre_w = parseInt(width*per);
pre_h = parseInt(height*per);

if (pre_w > mywidth) // 세로를 142 로 줄였는데 가로가 160 이 넘을때.
{
per = mywidth / width;
pre_w = parseInt(width*per);
pre_h = parseInt(height*per);
}
}

alert ("가로 : "+width+" , 세로 : "+height+" , 줄인가로 : "+pre_w+" , 줄인세로 : "+pre_h);

document.images["KJH_IMAGE"].src = miniimg.src;
document.images["KJH_IMAGE"].width = pre_w;
document.images["KJH_IMAGE"].height = pre_h;
}

</script>

<input type="file" name="imageupload" value="" onChange="FreeView(this.value)"><br>
<img name="KJH_IMAGE" src="">