무한 이미지 업로드 폼 생성
로빈아빠
본문
무한 이미지 업로드 폼 생성
<script>
// 이미지 추가 관련 스크립트 S;
function vuInputFormContentsImgs(ind, srcImg)
{
if (ind) {
contentsImgs = "preview_contents_imgs_" + ind;
if (srcImg.width <= 1024 && srcImg.height <= 768) {
if (srcImg.match(/(.jpg|.jpeg|.gif|.bmp)$/)) {
document.images[contentsImgs].src = srcImg;
document.images[contentsImgs].style.display = "";
} else {
document.images[contentsImgs].style.display = "none";
alert("이미지 파일은 bmp 및 jpeg, jpg 포맷만 올릴수 있습니다.");
delContentsImg();
}
} else {
alert("이미지 크기는 1024 px X 768 px 이하여야 합니다.");
delContentsImg();
}
} else {
contentsImgs = "preview_contents_imgs_" + event.srcElement.name.split("_")[2];
if (event.srcElement.offsetWidth <= 1024 && event.srcElement.offsetHeight <= 768) {
if (event.srcElement.value.match(/(.jpg|.jpeg|.gif|.bmp)$/)) {
document.images[contentsImgs].src = event.srcElement.value;
document.images[contentsImgs].style.display = "";
} else {
document.images[contentsImgs].style.display = "none";
alert("이미지 파일은 bmp 및 jpeg, jpg 포맷만 올릴수 있습니다.");
delContentsImg()
}
} else {
alert("이미지 크기는 1024 픽셀 X 768 픽셀 이하 여야 합니다.");
delContentsImg();
}
}
}
var noTh = 0;
var maXnoTh = 222;
function initInputFormContentsImgs()
{
fa = "";
for(var i = 1; i < maXnoTh+1; i++) {
fa += '<DIV ID="ta_'+ i +'" style="display:none;"></DIV>';
}
inputFormContentsImgs.innerHTML = fa;
}
function addContentsImg()
{
if (maXnoTh <= noTh) {
alert('더이상 이미지를 추가하실 수 없습니다.');
return false;
}
noTh = noTh + 1;
addTh = '<table border="0" cellpadding=0 cellspacing=0>';
addTh += '<tr>';
addTh += '<td valign="bottom" align="center" width="100" class=gray01>';
addTh += '이미지 파일 '+ noTh;
addTh += '</td>';
addTh += '<td valign="bottom">';
addTh += '<input type="file" name="contents_imgs_'+ noTh +'" class="search" size="20" onChange="vuInputFormContentsImgs();" />';
addTh += '</td>';
addTh += '<td valign="bottom" align="center" width="100">';
addTh += '<img id="preview_contents_imgs_'+ noTh +'" width="80" style="display:none;" border="1" />';
addTh += '</td>';
addTh += '</tr>';
addTh += '</table>';
ta = eval("ta_" + noTh);
ta.innerHTML = addTh;
ta.style.display = "";
}
function delContentsImg()
{
if(noTh <= 0)
{
alert('삭제할 이미지가 존재하지 않습니다.');
return false;
}
ta = eval("ta_" + noTh);
noTh = noTh - 1;
ta.innerHTML = '';
ta.style.display = "none";
}
</script>
<form name="postForm" method="post">
<table border=1><tr><td>
<!-- 이미지 올리기 폼 S -->
<div id="inputFormContentsImgs" ></div>
<button type="button" class="search" onclick="return addContentsImg();">이미지 추가 하기</button> <button type="button" class="search" onclick="return delContentsImg()">마지막 이미지 삭제 하기</button>
<script>initInputFormContentsImgs();</script>
<!-- 이미지 올리기 폼 E -->
</table>
</form>
<html>
<head>
<script language="javascript">
function AddFile()
{
var objTbl = document.getElementById("tblAttFiles");
var objRow = objTbl.insertRow(objTbl.rows.length);
var objCell = objRow.insertCell(0);
objCell.innerHTML =
"<img width=50 src=sample.gif align=absbottom>\n" +
"<input type=file onChange='CkImageVal()' name=AttFile[] size=40>";
document.recalc();
}
function CkImageVal() {
var oInput = event.srcElement;
var fname = oInput.value;
if((/(.jpg|.jpeg|.gif|.png)$/i).test(fname))
oInput.parentElement.children[0].src = fname;
else
alert('이미지는 gif, jpg, png 파일만 가능합니다.');
}
</script>
</head>
<body>
<table id=tblAttFiles cellspacing=0 border=0>
<tr><td>
<img width=91 src=http://izenic.com/galley/selImg.gif align=absbottom>
<input type=file name=AttFile[] size=40 onChange="CkImageVal()" class=textidpass>
</td></tr>
</table>
<br>
<input type=button value='이미지 입력 추가' onclick="AddFile()">
</body>
</html>관련링크
댓글목록
등록된 댓글이 없습니다.