½º¸¶Æ®¿¡µðÅÍ SmartEditor ½Ì±Û/¸ÖƼ À̹ÌÁö¾÷·Îµå Çϱâ - JAVA / JSP ¹öÀü
¾Æ À̳𶧹®¿¡ ¹Ý³ªÀý »ðÁúÇѵí... -_-
ÀÏ¹Ý ½Ì±Û À̹ÌÁö¾÷·Îµå´Â ¼º°øÇÏ¿´´Âµ¥ html5 µå·¡±×¾Øµå·Ó¿¡¼ »ðÁú½ÃÀÛ...
¿¡µðÅÍ»ùÇüҽº¿¡ À̹ÌÁö ¾÷·Îµå °ü·Ã php ¼Ò½º´Â ÀÖÁö¸¸ java/jsp ¼Ò½º°¡ ¾ø´Â°Å °°¾Æ Æ÷½ºÆÃ
Çϵµ·Ï ÇÑ´Ù.
½Ì±Û/¸ÖƼ À̹ÌÁö ¾÷·Îµå ¸ðµÎÆ÷½ºÆà ÇÏ¿´À½!!!
ÀÌ°Ç ´Ü¼ø Ãâ·Â¹°À» »Ì±âÀ§ÇØ ´ëÃæ ÄÚµù ÇÑ°ÍÀ̹ǷΠÁ¤¸®´Â ¾Ë¾Æ¼µé ÇϽñæ... ¤Ì.¤Ì
½ºÇÁ¸µÀ¸·Î ÆÄÀÏ󸮴 ½¬¿î´ë... ¤Ð¤Ð jsp·Î °£¸¸¿¡ ÇÏ·Á´Ï¤»¤» gg.....
* ½º¸¶Æ®¿¡µðÅÍ ¹öÀü - SE2.3.10.O11329
¿ì¼± Áö³ Æ÷½ºÆÿ¡ ÀÌ¾î¼ ¿¡µðÅÍ ¿ìÃø»ó´ÜÀ» º¸°Ô µÈ´Ù¸é »çÁøÀ̶ó´Â ¹öÆ°ÀÌ Á¸ÀçÇÒ °ÍÀÓ.
°¢ ºê¶ó¿ìÀúº°·Î ¹öÆ° Ŭ¸¯½Ã ¾÷·Îµå ±â´É¿¡ ´ëÇÑ À¯ÇüÀÌ Æ²¸®´Ù.
IE11 ¹Ì¸¸ ¹öÀü¿¡¼´Â ½Ì±Û ¸ÖƼÆÄÆ® ¾÷·ÎµåȸéÀ» Ãâ·Â½ÃÅ°°í
IE11, Å©·Ò, »çÆĸ® µî¿¡¼´Â µå·¡±×¾Øµå·Ó±â´ÉÀ¸·Î ¸ÖƼÆÄÀÏ ¾÷·Îµå(µå·¡±×¾Øµå·Ó) ÆûÀ» Ãâ·Â
½ÃŲ´Ù.
1) ½Ì±Û¾÷·Îµå ȸé
2) ¸ÖƼÇþ÷·Îµå ȸé(µå·¡±×¾Øµå·Ó)
¿ì¼± ÆÄÀÏ Ã³¸®¸¦ À§ÇØ ¶óÀ̺귯¸® 2°³¸¦ ´Ù¿î¹ÞÀÚ
(º»ÀÎÀº dynamic web project·Î ÇÏ°í, º°µµÀÇ ÇÁ·¹ÀÓ¿öÅ© ¿¬µ¿¾øÀÌ jspÄڵ忹Á¦´Ù)
¾îÂ¥ÇÇ ³»ºÎ·ÎÁ÷ ºñ½ÁÇÏ°í ÇÁ·¹ÀÓ¿öÅ©º°·Î ƯÁ¤ ºÎºÐ¸¸ ¼öÁ¤ÇϸéµÇ´Ï...
À§ jarÆÄÀϵéÀ» lib Æú´õ¿¡ ³Öµµ·Ï ÇÏÀÚ
maven ÀÌ¿ëÀÚÀº dependency Ãß°¡ÇÏÀÚ (¹öÀüÀº ¾Ë¾Æ¼ ¸ÂÃßÀÚ..)
<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>
spring »ç¿ëÀÚ´Â ÆÄÀÏ󸮸¦ À§ÇØ ¸ÖƼÆÄÆ® ºóÀ» µî·ÏÇÏ¸é µÉ°ÍÀÌ°í...
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />
ÀÌ°É·Î ÆÄÀϾ÷·Îµå ±âÃÊ°ø»ç´Â ³¡³µÀ¸´Ï... ¿¡µðÅÍ µð·ºÅ丮 -> photo_uploader -> popup
µð·ºÅ丮³»ÀÇ ¼Ò½º 2°¡Áö¸¦ ¼öÁ¤ÇØÁÖµµ·Ï ÇÏÀÚ
1. photo_uploader.html
ÇØ´ç formÀÇ actionÀº ¹«ÀÇ¹Ì Çѵí -_- action="xxxxx" ÀÚü¸¦ »èÁ¦!
<form id="editor_upimage" name="editor_upimage" action="FileUploader.php" method="post" enctype="multipart/form-data" onSubmit="return false;>
2. attach_photo.js
º¯°æÇÔ¼ö : callFileUploader() , html5Upload()
ù¹ø°·Î ½Ì±ÛÆÄÀÏ ¾÷·Îµå¸¦ ¸ÕÀú ó¸® Çϵµ·Ï ÇÏÀÚ
°ü·Ã ÇÔ¼ö´Â callFileUploader() ÇÔ¼öÀÌ´Ù.
º¯°æ ¼Ó¼ºÀº sUrl, sCallbackÀÌ´Ù
º»ÀÎÀº WebContent°æ·Î ¹Ù·Î ¹Ø¿¡ file_uploader.jsp ¸¦ »ý¼ºÇÏ¿´´Ù.
À§ jsp¿¡ ´ëÇÑ ³»¿ëÀº ÇÏ´Ü¿¡ ±â¼úÇϵµ·Ï ÇÏ°ÚÀ½...
±âÁ¸ file_uploader.php -> jsp·Î º¯°æ¸¸ ÇÑ°Í»ÓÀÌ´Ù.
callback.htmlÀº editor -> photo_uploader -> popup -> callback.html ÀÇ °æ·Î¸¦ Àý´ë°æ·Î·Î
ÁöÁ¤ÇØÁÜ
µÎ°¡Áö ¼Ó¼º°ªÀ» ÇÏ´Üó·³ º¯°æÇÔ
sUrl : '/file_uploader.jsp', //»ùÇà URLÀÔ´Ï´Ù. sCallback : '/editor/photo_uploader/popup/callback.html', //¾÷·Îµå ÀÌÈÄ¿¡ iframeÀÌ redirectµÉ ÄݹéÆäÀÌÁöÀÇ ÁÖ¼Ò
´ÙÀ½À¸·Î ¸ÖƼÀ̹ÌÁö¾÷·Îµå¸¦ À§ÇØ html5Upload() ÇÔ¼ö³»ÀÇ º¯¼ö°ª º¯°æÀ» Çϵµ·Ï ÇÏÀÚ
Çì´õ¿¡ Á¤º¸¸¦ ´ã´Â°Å °°Àº´ë .. -0- ±×³É ºÐ¼®±îÁö´Â Çϱ⠽ÈÀ¸¹Ç·Î
sUploadURL= 'file_uploader_html5.php'; //upload URL
À̺κÐÀÇ urlÀ» jsp·Î º¯°æÇϵµ·Ï ÇÏÀÚ
sUploadURL= '/file_uploader_html5.jsp'; //upload URL
¹°·Ð file_uploader_html5.jsp·Î WebContent ÇÏ´Ü¿¡ ÆÄÀÏ »ý¼ºÇÔ
¿À¿¹ ÀÌÁ¦ jsp ÄÚµå 2°³¸¸ ÀÛ¼ºÇÏ¸é ³¡³´Ù!!
°£´ÜÇÏÁö ¾ÊÀº°¡~~~
(1) file_uploader_html.jsp
import Ŭ·¡½º´Â ´ÙÀ½°ú °°´Ù.
<%@page import="java.io.FileOutputStream"%>
<%@page import="java.io.OutputStream"%>
<%@page import="java.io.InputStream"%>
<%@page import="java.util.UUID"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
String return1=""; String return2=""; String return3=""; //º¯°æ title ű׿¡´Â ¿øº» ÆÄÀϸíÀ» ³Ö¾îÁÖ¾î¾ß ÇϹǷΠString name = ""; if (ServletFileUpload.isMultipartContent(request)){ ServletFileUpload uploadHandler = new ServletFileUpload(new DiskFileItemFactory()); uploadHandler.setHeaderEncoding("UTF-8"); List<FileItem> items = uploadHandler.parseRequest(request); 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")) { if(item.getSize() > 0) { //String name = item.getName().substring(item.getName().lastIndexOf(File.separator)+1); // ±âÁ¸ »ó´Ü Äڵ带 ¸·°í ÇÏ´ÜÄڵ带 ÀÌ¿ë name = item.getName().substring(item.getName().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.getServletContext().getRealPath("/"); //ÆÄÀÏ ±âº»°æ·Î _ »ó¼¼°æ·Î String filePath = dftFilePath + "editor" + File.separator +"upload" + File.separator; File file = null; 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; ///////////////// ¼¹ö¿¡ ÆÄÀϾ²±â ///////////////// InputStream is = item.getInputStream(); OutputStream os=new FileOutputStream(rlFileNm); 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"; // img ű×ÀÇ title ¿É¼Ç¿¡ µé¾î°¥ ¿øº»ÆÄÀϸí return3 += "&sFileName="+ name; return3 += "&sFileURL=/editor/upload/"+realFileNm; } }else { return3 += "&errstr=error"; } } } } response.sendRedirect(return1+return2+return3);
ÇÏ´ÜÀº ¸ÖƼÀ̹ÌÁö¾÷·Îµå¸¦ À§ÇÑ »ùÇà ÄÚµåÀÌ´Ù
(2) file_uploader_html5.jsp
import Ŭ·¡½º´Â ´ÙÀ½°ú °°´Ù.
<%@page import="java.io.*"%>
<%@page import="java.util.UUID"%>
<%@page import="java.text.SimpleDateFormat"%>
//ÆÄÀÏÁ¤º¸ 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) { out.println("NOTALLOW_"+filename); } else { //À̹ÌÁöÀ̹ǷΠ½Å±Ô ÆÄÀÏ·Î µð·ºÅ丮 ¼³Á¤ ¹× ¾÷·Îµå //ÆÄÀÏ ±âº»°æ·Î String dftFilePath = request.getServletContext().getRealPath("/"); //ÆÄÀÏ ±âº»°æ·Î _ »ó¼¼°æ·Î String filePath = dftFilePath + "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"; //sFileInfo += "&sFileName="+ realFileNm;; // img ű×ÀÇ title ¼Ó¼ºÀ» ¿øº»ÆÄÀϸíÀ¸·Î Àû¿ë½ÃÄÑÁÖ±â À§ÇÔ sFileInfo += "&sFileName="+ filename;; sFileInfo += "&sFileURL="+"/editor/multiupload/"+realFileNm; out.println(sFileInfo); }
ÀÌ°É·Î ¿¡µðÅÍ + À̹ÌÁö ¾÷·Îµå ¿¬µ¿ ³¡!!!
spring framework´Â Á»´õ ½ÉÇÃÇÑ´ë.... ¿¬µ¿ ¼º°øÇÏ½Ã±æ ºô°Ú½ÀµÂ~
½ÇÇൿÀÛÀ» º¸°í ½º¸¶Æ®¿¡µðÅÍ ¿¬µ¿Àº ÀÌ°É·Î ³¡~
1) ´ÜÀÏ À̹ÌÁö ¾÷·Îµå
1) ´ÙÁß À̹ÌÁö ¾÷·Îµå(µå·¡±×¾Øµå·Ó ÆÄÀÏ÷ºÎ)
¾ÆÇÏ~ Àß ¿¬µ¿µÇ´Â°ÍÀÌ È®ÀεǾú´Ù ^^
Ãâó: https://roqkffhwk.tistory.com/111 [¾ß±Ù½È¾îÇÏ´Â °³¹ßÀÚ]
Ãâó: https://roqkffhwk.tistory.com/111 [¾ß±Ù½È¾îÇÏ´Â °³¹ßÀÚ]
Ãâó: https://roqkffhwk.tistory.com/111 [¾ß±Ù½È¾îÇÏ´Â °³¹ßÀÚ]