예제는 http://zzaroo.com/file_js/up.asp
링크는 asp지만 아래 소스 보시면 자바스크립트로만 되어있습니다.

<table border="0" cellpadding="0" cellspacing="0">
<form name="form" action="upfile.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="defaultIMG">
<tr>
<td width="624" valign="top">
<div id="tipIMG" style="position:absolute; z-index:1; visibility:visible;">
<table cellpadding="0" cellspacing=0 border=0 width="600">
<tr>
<td valign="bottom" align="center" height="190">
<img src="http://zzaroo.com/image/img_button/photo_tip.gif">
</td>
</tr>
</table>
</div>


<table border="0" cellpadding="9" cellspacing="1" width="100%" height="300" bgcolor="#999999">
<tr>
<td valign="top" bgcolor="white" id="AddimgForm">

</td>
</tr>
</table>
</td>
<td width="75" valign="top">
<div id="filelayer" style="position:absolute; width:75px; height:33px; overflow:hidden; FILTER:alpha(opacity=0); z-index:1;">
<table cellpadding="0" cellspacing=0 border=0 id="AddFileForm" align="right">
</table>
</div>

<p align="right">
<img src="http://zzaroo.com/image/img_button/img_find.gif" width="70" height="33" border="0" align="absmiddle"><br>
<img src="http://itspas.com/image/space.gif" width="1" height="3"><br>
<input type="image" src="http://zzaroo.com/image/img_button/img_del.gif" border="0" onClick="return DelFile();" align="absmiddle"><br>


<img src="http://itspas.com/image/space.gif" width="1" height="10"><br>
<input type="image" src="http://zzaroo.com/image/img_button/img_select.gif" border="0" onClick="return allSelect('select');" align="absmiddle"><br>
<img src="http://itspas.com/image/space.gif" width="1" height="3"><br>
<input type="image" src="http://zzaroo.com/image/img_button/img_select_c.gif" border="0" onClick="return allSelect();" align="absmiddle"><br>


<img src="http://itspas.com/image/space.gif" width="1" height="10"><br>
<input type="image" src="http://zzaroo.com/image/img_button/img_default.gif" border="0" onClick="return checkIMG();" align="absmiddle"><br>
<img src="http://itspas.com/image/space.gif" width="1" height="3"><br>
<input type="image" src="http://zzaroo.com/image/img_button/img_submit.gif" border="0" onClick="return sendit();" align="absmiddle"><br>
<img src="http://itspas.com/image/space.gif" width="1" height="30"><br>

<span style="font-size:8pt;">
<font face="Verdana">total <br>
fileSize.byte<br>
<input type="text" name="imgsizeView" value="0" size="10" style="font-size:8pt; border-width:1; border-style:solid;">
</font>
</span>

</td>
</tr>
</form>
</table>




<script>
//*************************************************************************************
// *
// creator : dongmani *
// homepage : www.dongmani.com *
// msn : ing@dongmani.com *
// mail : mykidari@naver.com *
// *
//*************************************************************************************



//이미지 보여주기
function imgChange(fileValue){
var str = document.all;
var oInput = event.srcElement;
var imgURL = oInput.value;

//이미지 갯수 제한
if(str.gImg.length >= 16){
alert("이미지는 최대 15개까지 업로드가능합니다.");
return false;
}


//파일이름 체크
if((/(.jpg|.jpeg|.gif|.png)$/i).test(fileValue)){
for(i=0;i<document.all.imgAttFile.length;i++){ //중복파일 체크
if(fileValue == str.imgAttFile[i].value){
if(i != (str.imgAttFile.length-1)){
alert ("중복되었습니다.");
return false;
}
}}

AddHtml(); //html삽입

//이미지 배열체크후 이미지 URL변경&스타일 -display- 변경
if(str.gImg.length){
str.gImg[str.gImg.length-1].src = fileValue;
str.gTb[str.gTb.length-1].style.display='';
}else{
str.gImg.src = fileValue;
str.gTb.style.display='';
}


}else{
alert('이미지는 gif, jpg, png 파일만 가능합니다.');
return false;
}
imgfilesize(); //이미지 용량체크
return false;
}


// html 넣기
function AddHtml(){

objTbody = document.getElementById("AddFileForm");
objRow = objTbody.insertRow(objTbody.rows.length);
objCell = objRow.insertCell(0);
objCell.innerHTML+="<input type='file' style='width:10; height:30; CURSOR: hand;' name='imgAttFile[]' id='imgAttFile' OnChange='imgChange(this.value)'>";

objTb = document.getElementById("AddimgForm");
objTb.innerHTML+="<table border=0 cellpadding=8 height=140 cellspacing=2 id=gTb style=display='none'><tr><td align=center valign=top bgcolor=#FFFFFF width=100><img align=absbottom name='gImg' onclick='return checkTb()' border=0 style='CURSOR: hand;'></td></tr></table>";

//값이 입력되면 파일입력상자가 위치한 rows부분을 숨김
if(document.all.imgAttFile.length){
objTbody.rows[objTbody.rows.length-2].style.display = 'none';
}

AlignTb();
return false;
}

//이미지 용량계산
function imgfilesize(){
var ele = 0;
var intfile;
var str = document.all;

try{ //이미지를 올리다 삭제를 할경우 에러가 발생하므로 try처리
if(str.gImg[str.gImg.length-1].complete == false){
setTimeout('imgfilesize()',50);
}else{
for(i=1;i<str.gImg.length;i++){ //배열 0에 해당하는 빈이미지
if(str.gImg[i].width > 100){ //그래서 이미지 배열은 1부터 시작
str.gImg[i].width = 100;
}

if(str.gImg[i].height > 120){
str.gImg[i].height = 120;
}
intfile = parseInt(document.all.gImg[i].fileSize);
ele += intfile;
}

}
}catch(e){
}
str.imgsizeView.value = ele;

if(parseInt(str.imgsizeView.value) > 204800){
alert ("파일용량제한 에러 \n\n총 업로드 제한용량은 204800byte입니다.");
//최종선택이미지 삭제
str.gImg[str.gImg.length-1].parentNode.parentNode.parentNode.parentNode.style.backgroundColor = "#ff99cc";
DelFile();
}

return false;
}


//테이블 정렬 & 이미지 선택전에 보여주는 기본이미지
function AlignTb(){
var str = document.all;
if(str.gTb.length){
for(i=0;i<str.gTb.length;i++){
obj=document.getElementsByName("gTb")[i];
if(i%5 == 0){ // 숫자를 바꿔주면 정렬갯수를 바꿀수있습니다.
obj.align='';
}else{
obj.align='left';
}
}
}

//선택전 보여주는 기본 이미지
//레이어를 보여주거나 숨김
if((!str.imgAttFile.length)||(str.imgAttFile.length==1)){
str.tipIMG.style.visibility="visible";
}else{
str.tipIMG.style.visibility="hidden";
}


return false;
}


//이미지 클릭시 테이블 배경 바꿔주기
function checkTb(){
var str = document.all;
var TbCell = event.srcElement.parentNode.parentNode.parentNode.parentNode; //온클릭 이미지가 위치기준에서 상위(cell),상위(row),상위(tbody),상위(table)까지 이동
if(TbCell.style.backgroundColor == "#ff99cc"){TbCell.style.backgroundColor = "#FFFFFF";}else{TbCell.style.backgroundColor = "#ff99cc";}
return false;
}


//선택된 이미지 삭제하기
function DelFile(){
var str = document.all;
var tbLength = str.gTb.length;
var objTbody = document.getElementById("AddFileForm");
for(i=(tbLength-1);i>0;i--){
if(str.gTb[i].style.backgroundColor == "#ff99cc"){
obj=document.getElementsByName("gTb")[i];
obj.removeNode(true);

objRow = objTbody.deleteRow(i-1);
}
}
AlignTb();
imgfilesize();
return false;
}


//전체선택&선택취소
function allSelect(ele){
var str = document.all;
var tbLength = str.gTb.length;
for(i=1;i<tbLength;i++){
if(ele){
str.gTb[i].style.backgroundColor = "#ff99cc";
}else{
str.gTb[i].style.backgroundColor = "#ffffff";
}
}
return false;
}


//대표이미지를 지정
//쇼핑몰 이미지 등록시 대표이미지에 대한 섬네일이미지 가공을 위함
function checkIMG(){
var str = document.all;
var tbLength = str.gTb.length;
var j = 0;
for(i=0;i<tbLength;i++){
if(str.gTb[i].style.backgroundColor == "#ff99cc"){
j ++;
}
}
if(j > 1){
alert ("기본이미지는 한개만 가능합니다.");
return false;
}

for(i=0;i<tbLength;i++){
if(str.gTb[i].style.backgroundColor == "#99cc66"){
str.gTb[i].style.backgroundColor = "";
}
if(str.gTb[i].style.backgroundColor == "#ff99cc"){
str.gTb[i].style.backgroundColor = "#99cc66";
}
}

return false;
}



//전송을 위한 폼값 체크
function sendit(){
var str = document.all;
if((!str.imgAttFile.length)||(str.imgAttFile.length==1)){
alert("파일을 선택해주세요");
return false;
}else{
str.defaultIMG.value = 0;
for(i=0;i<str.gTb.length;i++){
if(str.gTb[i].style.backgroundColor == "#99cc66"){
str.defaultIMG.value = i-1;
}
}
}
document.form.submit();
return true;

}

AddHtml(); //처음 페이지 실행시 html삽입 활성화
</script>

--출처 동마니 닷컴
http://dongmani.com<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>