이미지 실시간 보여주기, 용량체크, 스타일동적교체

<title>이미지실시간보여주기, 용량체크하기, 스타일동적교체</title>
<style type=text/css>
.upbg3 {
display:visible;
}
.kk {
display:none;
}
</style>

<script>
<!--
function imgChange( img ) {
var cs_img = document.all.coverstory_img;

if(event.srcElement.value.match(/(.[jJ][pP][eE]?[gG]|.[gG][iI][fF]|.[pP][nN][gG])/)) {
document.all['coverstory_img'].className='upbg3';
cs_img.src = img;
setTimeout('checkImgSize()', 500);
} else {
update.value=0;
cs_img.src="http://img.yahoo.co.kr/club/club/cover/img_cover_photo.gif";
alert("업로드 할 수 없는 파일 형식입니다");
}

}
function checkImgSize() {
var cs_img = document.all.coverstory_img;
var yahooimg = document.varform.yahooimg;
var userimg = document.varform.userimg;
var update = document.varform.update;

if ( cs_img.fileSize > 100 * 1024 ) {
alert("100K 이상의 이미지는 업로드 할 수 없습니다.");
cs_img.src = "http://img.yahoo.co.kr/club/club/cover/img_cover_photo.gif";
update.value = 0;
return false;
}
return true;

}

-->
</script>

<form name="varform" method=post action="/king/COVERSTORY/edit.html" ENCTYPE='multipart/form-data'>
<img src="http://img.yahoo.co.kr/club/club/cover/img_cover_photo.gif" width="269" height="196" name="coverstory_img" class=kk>
<br>
<input type="file" name="img" onChange="imgChange(document.varform.img.value)">
</form>
<ul style=color:#ff9933;font-weight:bold;font-size:12pt>
<li>이미지 실시간으로 보여주기
<li>이미지 용량 체크해주기
<li>이미지 넣는 순간 스타일 바꿔 적용하기
</ul>