무한(?) 이미지 업로드 퍼엄~~ 입력박스 추가생성
페이지 정보
조회
18,794
본문
평상시 눈여겨봤는데;; ㅡ.ㅡ 쓰실분은 쓰시구여...
여기 비슷한 내용있군여..ㅋㅋ
어째든 없는것도 있으니깐..응용하세여~
http://phpschool.com/bbs2/inc_view.html?id=10312&code=tnt2&start=0&mode=search&field=title&search_name=&operator=and&period=all&category_id=&s_que=%B9%AB%C7%D1%2C%B7%CE%B5%E5
-----------------------------------------------------------------------------
<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>
-------------------------------------------------------------
간단버전
<body>
<TABLE border=1>
<TR>
<TD>
<input type=button value=추가 onclick='adImage();'><input type=button value=제거 onclick='remove();'>
</TD>
</TR>
<TR >
<TD id=imglayer >
<div><input type=file id=img onchange='vimg(this)'></div>
</TD>
</TR>
</TABLE>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
var imgobj='<div><input type=file name=img onchange="vimg(this)"></div>';
function adImage(){
imglayer.innerHTML+=imgobj;
}
function remove(){
if(img.length!=null && img.length>1 ){
imglayer.removeChild(img[img.length-1].parentElement);}
else{alert('1개 이하는 삭제불가...');}
}
function vimg(obj){
var file=obj.value;re=/.jpg|.gif|.png/
if(re.test(file)){
obj.parentElement.innerHTML+='<img src="'+obj.value+'" width=50>';
}
else{
obj.parentElement.innerHTML=imgobj;
alert("이미지만 업로드가능!!!");
}
}
//-->
</SCRIPT>
초간단버전....압축하기 좋아해서
관련자료
-
링크
등록된 댓글이 없습니다.
