파일 업로드 Gmail 흉내내기

http://blog.naver.com/locusty/80014514595

attachment.png form-8976.html upload.jsp

http://www.jakartaproject.com/article/javascripttip/1119919717585 파일 업로드 Gmail 흉내내기~ <script language=javascript> var scripts = new Array; function make_array(status, display_script) { this.status = status; this.display_script = display_script; } function attach(obj) { var val = obj.value; var idx = obj.name.substring('file'.length); obj.style.display = 'none'; add_item(++idx, val); item_list(); } function add_item(idx, val) { var seq = scripts.length; var display_script = '<span id=display_item'+idx+'>'+val+' <b onclick=remove_item('+seq+') style=cursor:pointer>remove..</b></span><br>'; var file_script = '<span id=file_item'+idx+'><input type=file name=file'+idx+' id=file'+idx+' onchange=attach(this) size=1 style=width:0;cursor:pointer></span>'; scripts[seq] = new make_array(true, display_script); document.getElementById('file_items').insertAdjacentHTML("afterEnd", file_script); } function item_list() { var validate_cnt = 0; var display_scripts = ''; for (var i = 0; i < scripts.length; i++) { if (scripts[i].status){ validate_cnt++; display_scripts += '<b>'+validate_cnt+'</b>.'+scripts[i].display_script; } } if (validate_cnt == 0) display_scripts = 'No files..'; document.getElementById('display_items').innerHTML = display_scripts; } function remove_item(seq) { scripts[seq].status = false; document.getElementById('file_item'+(seq+1)).innerHTML = ''; item_list(); } function preprocessing() { var idx = scripts.length + 1; document.getElementById('file_item'+idx).innerHTML = ''; } /* Netscape/Mozilla에서 insertAdjacentHTML을 emulation하는 스크립트 * 참고 사이트 http://forums.mozilla.or.kr/viewtopic.php?t=678, http://www.faqts.com/knowledge_base/view.phtml/aid/5756 **/ if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){ HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode){ switch (where){ case 'beforeBegin': this.parentNode.insertBefore(parsedNode,this) break; case 'afterBegin': this.insertBefore(parsedNode,this.firstChild); break; case 'beforeEnd': this.appendChild(parsedNode); break; case 'afterEnd': if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling); else this.parentNode.appendChild(parsedNode); break; } } HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr) { var r = this.ownerDocument.createRange(); r.setStartBefore(this); var parsedHTML = r.createContextualFragment(htmlStr); this.insertAdjacentElement(where,parsedHTML) } HTMLElement.prototype.insertAdjacentText = function(where,txtStr){ var parsedText = document.createTextNode(txtStr) this.insertAdjacentElement(where,parsedText) } } </script> <form name=upload enctype='multipart/form-data' method=post action=upload.jsp onsubmit=preprocessing()> <fieldset style=padding:5px;background-color:#eeeeee;font-size:9pt;> <div id=display_items>No files..</div> </fieldset> <img src=attachment.png style=cursor:pointer style=width:28;height:10 align=absmiddle> <font style=font-size:9pt;text-decoration:underline;>Attach a file</font> <div style='width:100;height:16;overflow:hidden;position:relative;top:-18px;filter:alpha(opacity=0);-moz-opacity:0'> <div id=file_items></div> <span id=file_item1><input type=file name=file1 id=file1 onchange=attach(this) size=1 style=width:0;cursor:pointer></span> </div> <input type=submit value=submit> </form> JS로 보안경고가 나오지 않고 서버에 잘 올라가며 IE, FF에서 테스트 하였습니다 파일 업로드는 commons-fileupload이며 테스트를 위해 간단히 작성된 것입니다 테스트한 파일 모두 첨부합니다