³×À̹ö ½º¸¶Æ®¿¡µðÅÍ »çÁø÷ºÎ ±â´É ¿¡µðÅÍ À̹ÌÁö Ãß°¡ ´ÙÁß ÆÄÀÏ ¾÷·Îµå
ÀÌÀü¿¡ ½º¸¶Æ® ¿¡µðÅÍ ¿¬µ¿ÇÑ ÈÄ ¿¡µðÅÍ¿¡ ÀÛ¼ºÇÑ ³»¿ëÀ» ¼¹ö¿¡ Àü¼ÛÇÏ¿© ¹Þ´Â ³»¿ë¿¡ °üÇÏ¿© Æ÷½ºÆÃÀ» Çß¾ú½À´Ï´Ù.
ÀÌ¾î¼ ¿¡µðÅÍ ÅÛÇø´¿¡ Á¸ÀçÇÏ´Â »çÁø÷ºÎ ±â´ÉÀ» ÀÌ¿ëÇÏ¿© ¿¡µðÅͳ»¿¡ À̹ÌÁö Ãß°¡ÇÏ´Â ±â´É¿¡ ´ëÇÏ¿© Æ÷½ºÆà Çغ¸µµ·Ï ÇÏ°Ú½À´Ï´Ù.
¹°·Ð, HTML5 ¸¦ ÀÌ¿ëÇÏ´Â ´ÙÁßÆÄÀϾ÷·Îµå±îÁö ½º¸¶Æ®¿¡µðÅÍ¿¡¼ ±¸ÇöÀÌ µÇ¾îÀÖÀ¸¹Ç·Î
À̺κР¿ª½Ã ÀÛ¼ºÇϵµ·Ï ÇÏ°Ú½À´Ï´Ù.
ÇÁ·¹ÀÓ¿öÅ©¸¦ »ç¿ë¾ÈÇÏ°í ÀÏ¹Ý jsp¸¸À» ÀÌ¿ëÇϹǷΠº°µµÀÇ ¶óÀ̺귯¸®°¡ Ãß°¡·Î ÇÊ¿äÇÕ´Ï´Ù.
Apache Commons FileUpload ¶óÀ̺귯¸® ´Ù¿î·ÎµåÆäÀÌÁö
http://commons.apache.org/proper/commons-fileupload/download_fileupload.cgi
À§¿¡ ¹ÙÀ̳ʸ® zip ÆÄÀÏÀ» ´Ù¿î·Îµå ¹Þµµ·Ï ÇÕ´Ï´Ù.
¾ÐÃà ÇØÁ¦ ÈÄ lib µð·ºÅ丮³»¿¡ Á¸ÀçÇÏ´Â "commons-fileupload-1.3.1.jar"ÆÄÀÏÀ»
º»ÀÎÀÇ lib µð·ºÅ丮³»¿¡ ¶óÀ̺귯¸®¸¦ Ãß°¡ÇÕ´Ï´Ù.
Apache Commons IO ¶óÀ̺귯¸® ´Ù¿î·Îµå ÆäÀÌÁö
http://commons.apache.org/proper/commons-io/download_io.cgi
Commons-io ¶óÀ̺귯¸® ¿ª½Ã ¹ÙÀ̳ʸ® zip ÆÄÀÏÀ» ¹Þµµ·Ï ÇÕ´Ï´Ù.
´Ü, Commons-IO 2.4 ¹öÀü ´Ù¿î·Îµå¸¦ ¹ÞÀ¸½Ç°æ¿ì JDK 1.6 ÀÌ»óÀÏ °æ¿ì
Commons-IO 2.2¹öÀüÀº JDK 1.5 ÀÌ»óÀ» ´Ù¿î¹ÞÀ¸½Ã¸é µÇ°Ú½À´Ï´Ù.
¿ª½Ã ¾ÐÃà ÇØÁ¦ ÈÄ commons-io-x.x.jar ÆÄÀÏÀ» ÇÁ·ÎÁ§Æ®³» lib µð·ºÅ丮³»¿¡ ÇØ´ç ¶óÀ̺귯¸®¸¦ Ãß°¡ÇÕ´Ï´Ù.
Å©·ÒÀ¸·Î ÁøÇà½Ã ÀÚµ¿À¸·Î HTML5¸¦ ÀÌ¿ëÇÑ ´ÙÁßÆÄÀϾ÷·Îµå ȸéÀÌ Ãâ·ÂµÇ¹Ç·Î
½Ì±Û¾÷·Îµå¸¦ ȸ鿡 ¶ç¿ì±â À§Çؼ´Â IE10ÀÌÇÏ¿¡¼ ÁøÇàÇϽðųª
/photo_uploader/popup/attach_photo.js ÆÄÀÏÀÇ
¾à 38¹ø° ÁÙ¿¡ ÀÖ´Â checkDragAndDropAPI ÇÔ¼ö³»¿¡
1 2 3 4 5 | if (!!oNavigator.safari && oNavigator.version <= 5){ bSupportDragAndDropAPI = false ; } else { bSupportDragAndDropAPI = true ; } |
À§¿Í °°Àº Äڵ尡 ÀÖ½À´Ï´Ù.
else ºÎºÐÀÇ true °ªÀ» false·Î º¯°æÀ» ÇØÁֽøé
Å©·Ò¿¡¼µµ ½Ì±ÛÆÄÀϾ÷·Îµå ±¸ÇöÀÌ °¡´ÉÇÕ´Ï´Ù.
Á¦ÀϸÕÀú /photo_uploader/popup/photo_uploader.html ÆÄÀÏ ¿¾îº¸¸é
<form> űװ¡ Çϳª Á¸ÀçÇϴµ¥ action¿¡ ÀÛ¼ºµÇ¾îÀÖ´Â urlÀÌ Àǹ̰¡ ¾ø½À´Ï´Ù.
Çò°¥¸®Áö¾Ê°Ô action="FileUploader.php" À̺κÐÀ» Á¦°ÅÇÕ´Ï´Ù.
´ÙÀ½À¸·Î /photo_uploader/popup/attach_photo.js ÆÄÀÏÀ» open ÇϽŠÈÄ
Äڵ带 º¸½Ã¸é 479¹ø° ¶óÀο¡ callFileUploader ÇÔ¼ö°¡ ÀÖ½À´Ï´Ù.
ÀÌ ÇÔ¼ö°¡ ½Ì±ÛÆÄÀϾ÷·Îµå¸¦ ó¸®ÇÏ´Â ÇÔ¼öÀÔ´Ï´Ù.
1 2 | sUrl : location.href.replace(/\/[^\/]*$/, '' ) + '/file_uploader.php' , //»ùÇà URLÀÔ´Ï´Ù. sCallback : location.href.replace(/\/[^\/]*$/, '' ) + '/callback.html' , //¾÷·Îµå ÀÌÈÄ¿¡ iframeÀÌ redirectµÉ ÄݹéÆäÀÌÁöÀÇ ÁÖ¼Ò |
À§ Äڵ带 ´ÙÀ½Ã³·³ º¯°æÇÕ´Ï´Ù
file_uploader.jsp ´Â º°µµ·Î Ãß°¡ÇØÁÖ¾ú°í callback.html ÆÄÀÏÀº
ÀÌ¹Ì smarteditor Äڵ峻¿¡ Á¸ÀçÇϹǷÎ
º»ÀÎÀÇ °æ·Î¿¡ ¸ÂÃç¼ º¯°æÀ» ÇØÁÖµµ·Ï ÇÕ´Ï´Ù.
Àú´Â Á¦ ȯ°æ¿¡ ¸ÂÃç ´ÙÀ½Ã³·³ º¯°æÇÏ¿´½À´Ï´Ù.
1 2 | sUrl : '/file_uploader.jsp' , //º¯°æ URLÀÔ´Ï´Ù. sCallback : '/smarteditor/photo_uploader/popup/callback.html' , //¾÷·Îµå ÀÌÈÄ¿¡ iframeÀÌ redirectµÉ ÄݹéÆäÀÌÁöÀÇ ÁÖ¼Ò |
sUrl¿¡ Á¤ÀÇµÈ ÆäÀÌÁö´Â ÆÄÀϾ÷·Îµå¸¦ ó¸®ÇÏ´Â URLÀÌ°í
sCallbackÀº sUrl¿¡¼ ÆÄÀÏó¸®ÇÑ ´ÙÀ½ ÆÄÀÏÁ¤º¸ return ÇØÁִµ¥
¹Ù·Î ÀÌ return °ªµéÀ» callback.html¿¡¼ 󸮸¦ ÇØÁÖ´Â °ÍÀÔ´Ï´Ù.
ÀÌ¾î¼ file_uploader.jsp ÆäÀÌÁö¸¦ ±¸ÇöÇغ¸µµ·Ï ÇÏ°Ú½À´Ï´Ù.
file_uploader.jsp ÆÄÀϾ÷·Îµå »ùÇÃÄÚµå
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | String return1= "" ; String return2= "" ; String return3= "" ; String name = "" ; if (ServletFileUpload.isMultipartContent(request)){ ServletFileUpload uploadHandler = new ServletFileUpload( new DiskFileItemFactory()); //UTF-8 ÀÎÄÚµù ¼³Á¤ uploadHandler.setHeaderEncoding( "UTF-8" ); List<fileitem> items = uploadHandler.parseRequest(request); //°¢ Çʵåű׵éÀ» FOR¹®À» ÀÌ¿ëÇÏ¿© ºñ±³¸¦ ÇÕ´Ï´Ù. for (FileItem item : items) { if (item.getFieldName().equals( "callback" )) { return1 = item.getString( "UTF-8" ); } else if (item.getFieldName().equals( "callback_func" )) { return2 = "?callback_func=" +item.getString( "UTF-8" ); } else if (item.getFieldName().equals( "Filedata" )) { //FILE űװ¡ 1°³ÀÌ»óÀÏ °æ¿ì if (item.getSize() > 0 ) { String ext = item.getName().substring(item.getName().lastIndexOf( "." )+ 1 ); //ÆÄÀÏ ±âº»°æ·Î String defaultPath = request.getServletContext().getRealPath( "/" ); //ÆÄÀÏ ±âº»°æ·Î _ »ó¼¼°æ·Î String path = defaultPath + "upload" + File.separator; File file = new File(path); //µð·ºÅ丮 Á¸ÀçÇÏÁö ¾ÊÀ»°æ¿ì µð·ºÅ丮 »ý¼º if (!file.exists()) { file.mkdirs(); } //¼¹ö¿¡ ¾÷·Îµå ÇÒ ÆÄÀϸí(Çѱ۹®Á¦·Î ÀÎÇØ ¿øº»ÆÄÀÏÀº ¿Ã¸®Áö ¾Ê´Â°ÍÀÌ ÁÁÀ½) String realname = UUID.randomUUID().toString() + "." + ext; ///////////////// ¼¹ö¿¡ ÆÄÀϾ²±â ///////////////// InputStream is = item.getInputStream(); OutputStream os= new FileOutputStream(path + realname); int numRead; byte b[] = new byte [( int )item.getSize()]; while ((numRead = is.read(b, 0 ,b.length)) != - 1 ){ os.write(b, 0 ,numRead); } if (is != null ) is.close(); os.flush(); os.close(); ///////////////// ¼¹ö¿¡ ÆÄÀϾ²±â ///////////////// return3 += "&bNewLine=true&sFileName=" +name+ "&sFileURL=/upload/" +realname; } else { return3 += "&errstr=error" ; } } } } response.sendRedirect(return1+return2+return3); |
À§Ã³·³ jsp Äڵ带 ±¸Çö ÇÏ¿´½À´Ï´Ù.
JSP ÆäÀÌÁö¿¡ ±¸ÇöÄÚµåÀÇ IMPORT Ŭ·¡½ºµéÀº ´ÙÀ½°ú °°½À´Ï´Ù.
1 2 3 4 5 6 7 8 9 | java.util.UUID java.io.FileOutputStream java.io.OutputStream java.io.InputStream java.io.File java.util.List org.apache.commons.fileupload.FileItem org.apache.commons.fileupload.disk.DiskFileItemFactory org.apache.commons.fileupload.servlet.ServletFileUpload |
½ÇÇà°á°ú´Â ´ÙÀ½°ú °°½À´Ï´Ù.
¿¡µðÅÍ ½ÇÇà
ÆÄÀϾ÷·Îµå Æ˾÷â
ÆÄÀϼ±ÅÃ
ÆÄÀϼ±ÅÿϷá
¿¡µðÅÍ À̹ÌÁö ÷ºÎ Àû¿ë
ÀÌ¾î¼ HTML5¸¦ ÀÌ¿ëÇÑ ´ÙÁßÆÄÀϾ÷·Îµå¸¦ ±¸Çö Çغ¸µµ·Ï ÇÏ°Ú½À´Ï´Ù.
attach_photo.jsÆÄÀÏ¿¡ ¾à 333¶óÀο¡ html5Upload ÇÔ¼ö°¡ Á¸ÀçÇÕ´Ï´Ù.
1 | sUploadURL= 'file_uploader_html5.php' ; //upload URL |
À§ º¯¼öÀÇ °ªÀ» º»ÀÎÀÌ ÀÛ¼ºÇÏ°íÀÚ ÇÏ´Â ÆäÀÌÁö¸íÀ¸·Î Á¤ÀÇÇØÁÖ½Ã¸é µË´Ï´Ù.
Àú°°Àº °æ¿ì´Â
1 | sUploadURL= '/file_uploader_html5.jsp' ; //upload URL |
À§¿Í°°ÀÌ °ªÀ» º¯°æÇØÁÖ¾ú½À´Ï´Ù.
±×·³ º¯°æÇÑ sUploadURL º¯¼ö¿¡ ´ëÀÔÇÑ ÆäÀÌÁö URL¿¡ ´ëÇÑ ÆÄÀÏ¿¡ Äڵ带 Àû¿ëÇغ¸µµ·Ï ÇÏ°Ú½À´Ï´Ù.
file_uploader_html5.jsp ´ÙÁßÆÄÀÏ ¾÷·Îµå »ùÇÃÄÚµå
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | String sFileInfo = "" ; //ÆÄÀϸí - ½Ì±ÛÆÄÀϾ÷·Îµå¿Í ´Ù¸£°Ô ¸ÖƼÆÄÀϾ÷·Îµå´Â HEADER·Î ³Ñ¾î¿È String name = request.getHeader( "file-name" ); String ext = name.substring(name.lastIndexOf( "." )+ 1 ); //ÆÄÀÏ ±âº»°æ·Î String defaultPath = request.getServletContext().getRealPath( "/" ); //ÆÄÀÏ ±âº»°æ·Î _ »ó¼¼°æ·Î String path = defaultPath + "upload" + File.separator; File file = new File(path); if (!file.exists()) { file.mkdirs(); } String realname = UUID.randomUUID().toString() + "." + ext; InputStream is = request.getInputStream(); OutputStream os= new FileOutputStream(path + realname); int numRead; // ÆÄÀϾ²±â byte b[] = new byte [Integer.parseInt(request.getHeader( "file-size" ))]; while ((numRead = is.read(b, 0 ,b.length)) != - 1 ){ os.write(b, 0 ,numRead); } if (is != null ) { is.close(); } os.flush(); os.close(); sFileInfo += "&bNewLine=true&sFileName=" + name+ "&sFileURL=" + "/upload/" +realname; out.println(sFileInfo); |
½ÇÇà°á°ú´Â ´ÙÀ½°ú °°½À´Ï´Ù.
¡Ø ¸¸¾à ½Ì±ÛÆÄÀϾ÷·Îµå ÁøÇàÁß ¸ÖƼÆÄÀÏ ÁøÇàÇϽðíÀÚ »çÁø¹öÆ° Ŭ¸¯ÇÏ¿´´Âµ¥
½Ì±ÛÆÄÀÏÀÌ ³ª¿À½Å´Ù´Â ºÐµéÀº ij½¬¹®Á¦ÀÏ °¡´É¼ºÀÌ ÀÖÀ¸¹Ç·Î
»õ·Î°íħ ÇѹøÇØÁÖ½Ã¸é µÇ°Ú½À´Ï´Ù.
´ÙÁßÆÄÀÏ ½ÇÇà°á°ú ÀÔ´Ï´Ù.
¿¡µðÅÍ ½ÇÇà
´ÙÁßÆÄÀϾ÷·ÎµåÆ˾÷â
ÆÄÀϵ巡±×÷ºÎ
ÆÄÀϼ±ÅÿϷá
´ÙÁßÆÄÀÏ ¿¡µðÅÍ À̹ÌÁö ÷ºÎÀû¿ë
½ºÇÁ¸µ °ü·Ã ¿¡µðÅÍ ¿¬µ¿ Æ÷½ºÆÃÀº ´ÙÀ½¿¡ ÁøÇàÇϵµ·Ï ÇÏ°Ú½À´Ï´Ù .
Ãâó: https://hellogk.tistory.com/63 [IT Code Storage]