무한 이미지 업로드 폼 생성무한 이미지 업로드 폼 생성
페이지 정보
작성자 MintState 댓글 0건 조회 10,581회 작성일 08-11-10 11:30본문
무한 이미지 업로드 폼 생성
001 | <script> |
002 | // 이미지 추가 관련 스크립트 S; |
003 | function vuInputFormContentsImgs(ind, srcImg) |
004 | { |
005 | if (ind) { |
006 | contentsImgs = "preview_contents_imgs_" + ind; |
007 | if (srcImg.width <= 1024 && srcImg.height <= 768) { |
008 | if (srcImg.match(/(.jpg|.jpeg|.gif|.bmp)$/)) { |
009 | document.images[contentsImgs].src = srcImg; |
010 | document.images[contentsImgs].style.display = ""; |
011 | } else { |
012 | document.images[contentsImgs].style.display = "none"; |
013 | alert("이미지 파일은 bmp 및 jpeg, jpg 포맷만 올릴수 있습니다."); |
014 | delContentsImg(); |
015 | } |
016 | } else { |
017 | alert("이미지 크기는 1024 px X 768 px 이하여야 합니다."); |
018 | delContentsImg(); |
019 | } |
020 | } else { |
021 | contentsImgs = "preview_contents_imgs_" + event.srcElement.name.split("_")[2]; |
022 | if (event.srcElement.offsetWidth <= 1024 && event.srcElement.offsetHeight <= 768) { |
023 | if (event.srcElement.value.match(/(.jpg|.jpeg|.gif|.bmp)$/)) { |
024 | document.images[contentsImgs].src = event.srcElement.value; |
025 | document.images[contentsImgs].style.display = ""; |
026 | } else { |
027 | document.images[contentsImgs].style.display = "none"; |
028 | alert("이미지 파일은 bmp 및 jpeg, jpg 포맷만 올릴수 있습니다."); |
029 | delContentsImg() |
030 | } |
031 | } else { |
032 | alert("이미지 크기는 1024 픽셀 X 768 픽셀 이하 여야 합니다."); |
033 | delContentsImg(); |
034 | } |
035 | } |
036 | } |
037 | var noTh = 0; |
038 | var maXnoTh = 222; |
039 |
040 | function initInputFormContentsImgs() |
041 | { |
042 | fa = ""; |
043 | for(var i = 1; i < maXnoTh+1; i++) { |
044 | fa += '<DIV ID="ta_'+ i +'" style="display:none;"></DIV>'; |
045 | } |
046 | inputFormContentsImgs.innerHTML = fa; |
047 | } |
048 |
049 | function addContentsImg() |
050 | { |
051 | if (maXnoTh <= noTh) { |
052 | alert('더이상 이미지를 추가하실 수 없습니다.'); |
053 | return false; |
054 | } |
055 |
056 | noTh = noTh + 1; |
057 |
058 | addTh = '<table border="0" cellpadding=0 cellspacing=0>'; |
059 | addTh += '<tr>'; |
060 | addTh += '<td valign="bottom" align="center" width="100" class=gray01>'; |
061 | addTh += '이미지 파일 '+ noTh; |
062 | addTh += '</td>'; |
063 | addTh += '<td valign="bottom">'; |
064 | addTh += '<input type="file" name="contents_imgs_'+ noTh +'" class="search" size="20" onChange="vuInputFormContentsImgs();" />'; |
065 | addTh += '</td>'; |
066 | addTh += '<td valign="bottom" align="center" width="100">'; |
067 | addTh += '<img id="preview_contents_imgs_'+ noTh +'" width="80" style="display:none;" border="1" />'; |
068 | addTh += '</td>'; |
069 | addTh += '</tr>'; |
070 | addTh += '</table>'; |
071 |
072 | ta = eval("ta_" + noTh); |
073 | ta.innerHTML = addTh; |
074 | ta.style.display = ""; |
075 | } |
076 |
077 | function delContentsImg() |
078 | { |
079 | if(noTh <= 0) |
080 | { |
081 | alert('삭제할 이미지가 존재하지 않습니다.'); |
082 | return false; |
083 | } |
084 |
085 | ta = eval("ta_" + noTh); |
086 |
087 | noTh = noTh - 1; |
088 |
089 | ta.innerHTML = ''; |
090 | ta.style.display = "none"; |
091 | } |
092 | </script> |
093 | <form name="postForm" method="post"> |
094 | <table border=1><tr><td> |
095 | <!-- 이미지 올리기 폼 S --> |
096 | <div id="inputFormContentsImgs" ></div> |
097 | <button type="button" class="search" onclick="return addContentsImg();">이미지 추가 하기</button> <button type="button" class="search" onclick="return delContentsImg()">마지막 이미지 삭제 하기</button> |
098 | <script>initInputFormContentsImgs();</script> |
099 | <!-- 이미지 올리기 폼 E --> |
100 |
101 | </table> |
102 | </form> |
01 | <html> |
02 | <head> |
03 |
04 | <script language="javascript"> |
05 | function AddFile() |
06 | { |
07 | var objTbl = document.getElementById("tblAttFiles"); |
08 | var objRow = objTbl.insertRow(objTbl.rows.length); |
09 | var objCell = objRow.insertCell(0); |
10 | objCell.innerHTML = |
11 | "<img width=50 src=sample.gif align=absbottom>\n" + |
12 | "<input type=file onChange='CkImageVal()' name=AttFile[] size=40>"; |
13 | document.recalc(); |
14 | } |
15 |
16 | function CkImageVal() { |
17 | var oInput = event.srcElement; |
18 | var fname = oInput.value; |
19 | if((/(.jpg|.jpeg|.gif|.png)$/i).test(fname)) |
20 | oInput.parentElement.children[0].src = fname; |
21 | else |
22 | alert('이미지는 gif, jpg, png 파일만 가능합니다.'); |
23 | } |
24 | </script> |
25 |
26 | </head> |
27 | <body> |
28 |
29 | <table id=tblAttFiles cellspacing=0 border=0> |
30 | <tr><td> |
31 | <img width=91 src=http://izenic.com/galley/selImg.gif align=absbottom> |
32 | <input type=file name=AttFile[] size=40 onChange="CkImageVal()" class=textidpass> |
33 | </td></tr> |
34 | </table> |
35 | <br> |
36 | <input type=button value='이미지 입력 추가' onclick="AddFile()"> |
37 |
38 | </body> |
39 | </html> |
|
|
댓글목록
등록된 댓글이 없습니다.
