Spring3 À» ÀÌ¿ëÇÑ ½º¸¶Æ®¿¡µðÅÍ SmartEditor À̹ÌÁö ¾÷·Îµå html5 Àû¿ëÇϱâ
±âÁ¸ JAVA/JSP ¹öÀüÀ» ÀÌ¿ëÇÏ¿© ³×À̹ö ½º¸¶Æ®¿¡µðÅ͸¦ ¿¬µ¿¹ýÀ» ¼Ò°³Çß¾ú´Ù
À̹ø¿¡´Â ±âÁ¸ Æ÷½ºÆà Äڵ带 ÀÀ¿ëÇÏ¿© spring À¸·Î Æ÷½ºÆÃÀ» Çغ¸µµ·Ï ÇÏ°Ú´Ù
óÀ½ºÎÅÍ ³¡±îÁö »ó¼¼ÇÏ°Ô ¼³¸íÀº ÇÏÁö ¾Êµµ·Ï ÇÏ°ÚÀ½
±âÁ¸¿¡ Æ÷½ºÆÃÇÑ ³»¿ëÀ» ÀÀ¿ëÇÏ¿´±â ¶§¹®ÀÓ
¿ì¼± ½ºÇÁ¸µ ±â¹ÝÀÇ ¿¡µðÅÍ ±¸Á¶´Â ´ÙÀ½°ú °°´Ù
¿¡µðÅÍ¿¡ µé¾îÀÖ´Â ÆÄÀϵéÀº ¸®¼Ò½º ÆÄÀÏÀ̹ǷΠ/resources/editor Æú´õ³»¿¡ ½º¸¶Æ®¿¡µðÅÍ °ü·Ã ÆÄÀϵéÀ» ºÙ¿©³õ¾Ò´Ù
½ºÇÁ¸µÀÇ ¸®¼Ò½º ¿¬µ¿Àº À§ Æ÷½ºÆÃÀ» Âü°íÇϵµ·Ï ÇÏÀÚ
´ÙÀ½À¸·Î ±âº»ÀûÀÎ ¿¡µðÅÍ ¿¬µ¿¿¡ ´ëÇÑ Æ÷½ºÆÃÀº
ÇØ´ç Æ÷½ºÆÃÀ» Âü°íÇϵµ·Ï ÇÏÀÚ
¹°·Ð includeÇÏ´Â °æ·Î´Â ¼³Á¤ÇسõÀº path¸¦ Àû¿ëÇϵµ·Ï ÇÏÀÚ
º»ÀÎÀÇ ¿¡µðÅÍ °æ·Î´Â ´ÙÀ½°ú °°´Ù
spring ¿¬µ¿½Ã Çʼö·Ï ÀÖ¾î¾ß ÇÒ pom.xmlÀÇ dependency ¹× xml ¼³Á¤
pom.xml ÇÊ¿ä ¶óÀ̺귯¸®
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency>
mvc-config.xml ÆÄÀÏ°ü·Ã ¹× ¸®¼Ò½º Àû¿ë ¼³Á¤
<mvc:resources mapping="/resources/**" location="/resources/" /> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />
/resources/editor/photo_uploader/popup/attach_photo.js ¼³Á¤
¡Û callFileUploader ÇÔ¼ö - IE ÀÌÇÏ HTML5 Áö¿ø ºÒ°¡ ¹öÀüÀ» À§ÇÑ ÀÏ¹Ý ÆÄÀϾ÷·Îµå½Ã
ÇÊ¿äÇÑ ºÎºÐ º¯°æ
sUrl - ¾÷·Îµå 󸮸¦ ÇØÁÙ CONTROLLER URL Àû¿ë
sCallback - callback.htmlÀÇ °æ·Î ÁöÁ¤
º»ÀÎÀÇ °æ¿ì ´ÙÀ½Ã³·³ Àû¿ëÇßÀ½
oFileUploader = new jindo.FileUploader(jindo.$("uploadInputBox"),{ sUrl : '/file_uploader', //»ùÇà ÄÒÆ®·Ñ·¯ÀÔ´Ï´Ù. sCallback : '/resources/editor/photo_uploader/popup/callback.html', //¾÷·Îµå ÀÌÈÄ¿¡ iframeÀÌ redirectµÉ ÄݹéÆäÀÌÁöÀÇ ÁÖ¼Ò sFiletype : "*.jpg;*.png;*.bmp;*.gif", //Çã¿ëÇÒ ÆÄÀÏÀÇ Çü½Ä. ex) "*", "*.*", "*.jpg", ±¸ºÐÀÚ(;) sMsgNotAllowedExt : 'JPG, GIF, PNG, BMP È®ÀåÀÚ¸¸ °¡´ÉÇÕ´Ï´Ù', //Çã¿ëÇÒ ÆÄÀÏÀÇ Çü½ÄÀÌ ¾Æ´Ñ°æ¿ì¿¡ ¶ç¿öÁÖ´Â °æ°íâÀÇ ¹®±¸ bAutoUpload : false, //ÆÄÀÏÀÌ ¼±Åõʰú µ¿½Ã¿¡ ÀÚµ¿À¸·Î ¾÷·Îµå¸¦ ¼öÇàÇÒÁö ¿©ºÎ (upload ¸Þ¼Òµå ¼öÇà) bAutoReset : true // ¾÷·ÎµåÇÑ Á÷ÈÄ¿¡ ÆÄÀÏÆûÀ» ¸®¼Â ½ÃųÁö ¿©ºÎ (reset ¸Þ¼Òµå ¼öÇà) })
¡Û html5Upload ÇÔ¼ö URL º¯°æ - µå·¡±×¾Øµå·ÓÀ¸·Î ÆÄÀÏ÷ºÎ°¡ °¡´ÉÇÑ ÇÔ¼öÀÌ´Ù
sUploadURLº¯¼ö¿¡ º»ÀÎÀÌ Á¤ÇÑ ´ÙÁßÆÄÀϾ÷·Îµå ó¸® ÄÁÆ®·Ñ·¯ URLÀ» Á¤ÀÇÇÑ´Ù
sUploadURL= '/file_uploader_html5'; //upload URL
º»ÀÎÀº À§¿Í°°ÀÌ Á¤ÇØÁÖ¾ú´Ù
ÄÁÆ®·Ñ·¯ + VO¿¡ ´ëÇÑ ±¸Á¶´Â ´ÙÀ½°ú °°ÀÌ Àâ¾ÆÁÖ¾úÀ¸¸ç °¢ Ŭ·¡½ºÀÇ ÄÚµå´Â ´ÙÀ½°ú °°´Ù
/model/Editor.java
public class Editor { private MultipartFile Filedata; public MultipartFile getFiledata() { return Filedata; } public void setFiledata(MultipartFile filedata) { Filedata = filedata; } }
/controller/EditorController.java
¡Û ÀÏ¹Ý ÆÄÀϾ÷·ÎµåÀÇ ÄÁÆ®·Ñ·¯ - /file_uploader
@RequestMapping("/file_uploader") public String file_uploader(HttpServletRequest request, HttpServletResponse response, Editor editor){ String return1=request.getParameter("callback"); String return2="?callback_func=" + request.getParameter("callback_func"); String return3=""; String name = ""; try { if(editor.getFiledata() != null && editor.getFiledata().getOriginalFilename() != null && !editor.getFiledata().getOriginalFilename().equals("")) { // ±âÁ¸ »ó´Ü Äڵ带 ¸·°í ÇÏ´ÜÄڵ带 ÀÌ¿ë name = editor.getFiledata().getOriginalFilename().substring(editor.getFiledata().getOriginalFilename().lastIndexOf(File.separator)+1); String filename_ext = name.substring(name.lastIndexOf(".")+1); filename_ext = filename_ext.toLowerCase(); String[] allow_file = {"jpg","png","bmp","gif"}; int cnt = 0; for(int i=0; i<allow_file.length; i++) { if(filename_ext.equals(allow_file[i])){ cnt++; } } if(cnt == 0) { return3 = "&errstr="+name; } else { //ÆÄÀÏ ±âº»°æ·Î String dftFilePath = request.getSession().getServletContext().getRealPath("/"); //ÆÄÀÏ ±âº»°æ·Î _ »ó¼¼°æ·Î String filePath = dftFilePath + "resources"+ File.separator + "editor" + File.separator +"upload" + File.separator; File file = new File(filePath); if(!file.exists()) { file.mkdirs(); } String realFileNm = ""; SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss"); String today= formatter.format(new java.util.Date()); realFileNm = today+UUID.randomUUID().toString() + name.substring(name.lastIndexOf(".")); String rlFileNm = filePath + realFileNm; ///////////////// ¼¹ö¿¡ ÆÄÀϾ²±â ///////////////// editor.getFiledata().transferTo(new File(rlFileNm)); ///////////////// ¼¹ö¿¡ ÆÄÀϾ²±â ///////////////// return3 += "&bNewLine=true"; return3 += "&sFileName="+ name; return3 += "&sFileURL=/resources/editor/upload/"+realFileNm; } }else { return3 += "&errstr=error"; } } catch (Exception e) { e.printStackTrace(); } return "redirect:"+return1+return2+return3; }
¡Û HTML5 ¸ÖƼÆÄÀϾ÷·Îµå ÄÁÆ®·Ñ·¯ - /file_uploader_html5
@RequestMapping("/file_uploader_html5") public void file_uploader_html5(HttpServletRequest request, HttpServletResponse response){ try { //ÆÄÀÏÁ¤º¸ String sFileInfo = ""; //ÆÄÀϸíÀ» ¹Þ´Â´Ù - ÀÏ¹Ý ¿øº»ÆÄÀϸí String filename = request.getHeader("file-name"); //ÆÄÀÏ È®ÀåÀÚ String filename_ext = filename.substring(filename.lastIndexOf(".")+1); //È®ÀåÀÚ¸¦¼Ò¹®ÀÚ·Î º¯°æ filename_ext = filename_ext.toLowerCase(); //À̹ÌÁö °ËÁõ ¹è¿º¯¼ö String[] allow_file = {"jpg","png","bmp","gif"}; //µ¹¸®¸é¼ È®ÀåÀÚ°¡ À̹ÌÁöÀÎÁö int cnt = 0; for(int i=0; i<allow_file.length; i++) { if(filename_ext.equals(allow_file[i])){ cnt++; } } //À̹ÌÁö°¡ ¾Æ´Ô if(cnt == 0) { PrintWriter print = response.getWriter(); print.print("NOTALLOW_"+filename); print.flush(); print.close(); } else { //À̹ÌÁöÀ̹ǷΠ½Å±Ô ÆÄÀÏ·Î µð·ºÅ丮 ¼³Á¤ ¹× ¾÷·Îµå //ÆÄÀÏ ±âº»°æ·Î String dftFilePath = request.getSession().getServletContext().getRealPath("/"); //ÆÄÀÏ ±âº»°æ·Î _ »ó¼¼°æ·Î String filePath = dftFilePath + "resources" + File.separator + "editor" + File.separator +"multiupload" + File.separator; File file = new File(filePath); if(!file.exists()) { file.mkdirs(); } String realFileNm = ""; SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss"); String today= formatter.format(new java.util.Date()); realFileNm = today+UUID.randomUUID().toString() + filename.substring(filename.lastIndexOf(".")); String rlFileNm = filePath + realFileNm; ///////////////// ¼¹ö¿¡ ÆÄÀϾ²±â ///////////////// InputStream is = request.getInputStream(); OutputStream os=new FileOutputStream(rlFileNm); 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"; // img ű×ÀÇ title ¼Ó¼ºÀ» ¿øº»ÆÄÀϸíÀ¸·Î Àû¿ë½ÃÄÑÁÖ±â À§ÇÔ sFileInfo += "&sFileName="+ filename;; sFileInfo += "&sFileURL="+"/resources/editor/multiupload/"+realFileNm; PrintWriter print = response.getWriter(); print.print(sFileInfo); print.flush(); print.close(); } } catch (Exception e) { e.printStackTrace(); } }
À§ÀÇ °¢ Á¾·ùº°·Î Á¤»ó µ¿ÀÛÇÏ´ÂÁö Å×½ºÆ® Çغ¸µµ·Ï ÇÏÀÚ
¡Ü ±âº» ´ÜÀÏ ÆÄÀϾ÷·Îµå
¡Ü HTML5 ¸¦ ÀÌ¿ëÇÑ ¿¡µðÅÍ ¸ÖƼ¾÷·Îµå ½ÇÇàȸé
Ãâó: https://roqkffhwk.tistory.com/202?category=591228 [¾ß±Ù½È¾îÇÏ´Â °³¹ßÀÚ]