精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯系客服
java版ckeditor上傳圖片到數據庫


 

 

 

 

 

 

 

 

 

 

 

 最近要實現在ckedit上傳圖片，而且要上傳保存到數據庫，在網站找了不少資料，基本上都是保存到服務器的文件夾，但那些資料對我也起了很多作用。下面我把我的實現記錄下來，作為備忘。（CKEditor 在jsp中實現文件上傳的完整例子）http://blog.163.com/prevBlogPerma.do?host=ytrtfhj@126&srl=890531092010226023136&mode=prev

 

ckeditor非常強大，但官網上它的圖片/文件上傳使用了ckfinder，比較麻煩。我首先是在圖片鏈接輸入框的右邊加個按鈕，點擊事件鏈接到已有的上傳模塊，上傳后把圖片的下載url(這個花了我不少時間)傳遞給左邊的輸入框即可。步驟如下：

  打開plugins\image\dialogs\image.js，在鏈接輸入框代碼結尾也就是 m.lang.image.urlMissing)},后面加上這些代碼：

Java代碼
  1. {type:'button',id:'myUpload',align:'center',label:'新上傳 ',onClick:function(){var thisDialog = this.getDialog();var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl'); var txtUrlId = txtUrlObj.getInputElement().$.id;    
  2. var retFile = window.open("info2j.zrx?path=info/info_uploadImage&infotypeid="+top.document.getElementById('infotypeid').value+"&txtUrlId="+txtUrlId, "", "height=300, width=400"); if(retFile != null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},  

 

 {type:'button',id:'myUpload',align:'center',label:'新上傳 ',onClick:function(){var thisDialog = this.getDialog();var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl'); var txtUrlId = txtUrlObj.getInputElement().$.id; 為了獲得圖片URL文本框的id，并可以傳回頁面；我這里由于jsp頁面都是放在WEB-INF目錄下，所以頁面跳轉是借助action來實現的。所謂我是先把id傳到info2j.action，然后再從info_uploadImage.jsp頁面拿，

var retFile = window.open("info2j.action?path=info/info_uploadImage&infotypeid="+top.document.getElementById('infotypeid').value+"&txtUrlId="+txtUrlId, "", "height=300, width=400");

跳轉到info_uploadImage.jsp頁面，并把圖片URL文本框的id傳過去

下面是info_uploadImage.jsp的簡單代碼

Html代碼
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"%>  
  2. <%@ taglib uri="/struts-tags" prefix="s"%>  
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
  4. <html>  
  5.     <head>  
  6.            
  7.         <title>上傳圖片</title>  
  8.         <script type="text/javascript">  
  9.            
  10.         function checkFormat(filePath){   
  11.             var i = filePath.lastIndexOf(".");   
  12.             var len = filePath.length;   
  13.             var str = filePath.substring(i+1,len);   
  14.             var extName = "JPG,GIF,PNG,BMP";   
  15.            
  16.             if(extName.indexOf(str.toUpperCase()) < 0){   
  17.                 alert("圖片格式不正確");   
  18.                 return false;   
  19.             }   
  20.             return true;   
  21.                
  22.         }   
  23.            
  24.         /*   
  25.         圖標預覽，兼容ie，firefox   
  26.         */   
  27.         function fileChange(o){   
  28.             if(checkFormat(o.value)){   
  29.                 if(window.ActiveXObject){   
  30.                     document.getElementById("uploadImg").width = 100;   
  31.                     document.getElementById("uploadImg").height = 100;   
  32.                     document.getElementById("uploadImg").src = o.value;   
  33.                 }else{   
  34.                     document.getElementById("uploadImg").width = 100;   
  35.                     document.getElementById("uploadImg").height = 100;   
  36.                     document.getElementById("uploadImg").src = o.files[0].getAsDataURL();   
  37.                 }   
  38.                    
  39.             }   
  40.         }   
  41.   
  42.        /* 給圖片text附上圖片地址*/   
  43.        function finish(generatedId){   
  44.             //獲得圖片text的id   
  45.             var imageUrl = document.getElementById("txtUrlId").value;   
  46.               
  47.             alert("<s:text name='info.upload.success' />！");   
  48.               
  49.             window.opener.document.getElementById(imageUrl).value = "info_downloadImage.zrx?imageId="+generatedId;   
  50.             window.opener.document.getElementById("previewImage").setAttribute("src","info_downloadImage.zrx?imageId="+generatedId);   
  51.             window.close();   
  52.      }   
  53.           
  54.     </script>  
  55.   
  56.     </head>  
  57.   
  58.     <body>  
  59.            
  60.            
  61.         <s:form id="uploadForm" name="uploadForm" method="post" action="info_upLoadImage.zrx" theme="simple"  
  62.             enctype="multipart/form-data"  target="frame">  
  63.             <s:hidden id="infotypeid" name="infotypeid"></s:hidden>  
  64.             <s:hidden id="txtUrlId" name="txtUrlId"></s:hidden>  
  65.             <table align="center">  
  66.                 <tr>  
  67.                     <td colspan="2"><s:file id="image" name="image" onchange="return fileChange(this)" /></td>  
  68.                 </tr>  
  69.                 <tr>  
  70.                     <td><input type="submit" value="上傳" onclick="upload()"/></td>  
  71.                     <td><input type="button" value="取消" onclick="javascript:window.close();"/></td>  
  72.                 </tr>  
  73.             </table>  
  74.             <div align="center">  
  75.                 <img src="" width="0" height="0" id="uploadImg"/>  
  76.             </div>  
  77.                
  78.             </s:form>  
  79.            
  80.            
  81.         <iframe name="frame" style="display:none"  src="_self">  
  82.                
  83.         </iframe>  
  84.     </body>  
  85. </html>  

 

下面是上傳圖片和下載圖片方法

Java代碼
  1. /**  
  2.     * 方法名:upLoadImage  
  3.     * 作者:   
  4.     * 描述: 在信息內容編輯區上傳圖片到數據庫  
  5.     * @return  
  6.     * @throws Exception  
  7.     * 日期:2010-4-20  
  8.     */  
  9.     public String upLoadImage() throws Exception{   
  10.            
  11.         if (null != image) {   
  12.             //上傳圖片   
  13.               
  14.                infoImage = new InfoContentImage();   
  15.   
  16.                 String imageName = imageFileName; // 文件真名   
  17.                 String imageType = imageContentType;   
  18.                 Long length = image.length(); // 文件的真實大小   
  19.   
  20.                 // 設定InfoAttach對象的屬性   
  21.                 infoImage.setInfotypeid(new Long(infotypeid));   
  22.                 infoImage.setImagename(imageName);   
  23.                 infoImage.setImagetype(imageType);   
  24.                 infoImage.setImagesize(length);   
  25.                 infoImage.setDate(new Date());   
  26.   
  27.                 // 將上傳的文件保存到數據庫   
  28.   
  29.                 try {   
  30.                     InputStream is = new BufferedInputStream(new FileInputStream(image));   
  31.   
  32.                     ByteArrayOutputStream os = new ByteArrayOutputStream();   
  33.                     int len = 0;   
  34.                     byte[] content = new byte[is.available()];   
  35.   
  36.                     while (-1 != (len = is.read(content))) {   
  37.                         os.write(content);   
  38.                     }   
  39.                     infoImage.setImagecontent(os.toByteArray());   
  40.                     is.close();   
  41.                     os.close();   
  42.                 } catch (Exception e) {   
  43.                     e.printStackTrace();   
  44.                 }   
  45.         }   
  46.            
  47.            
  48.         Long generatedId = this.infoService.saveInfoContentImage(infoImage);   
  49.            
  50.         this.writeMessage("<script type='text/javascript'>parent.finish('"+ generatedId +"');</script>");   
  51.         return null;   
  52.     }   
  53.   
  54.   
  55.        
  56.        
  57.     /**  
  58.     * 方法名:downloadImage  
  59.     * 作者:   
  60.     * 描述:  
  61.     * @return  
  62.     * @throws Exception  
  63.     * 日期:2010-4-21  
  64.     */  
  65.     public String downloadImage() throws Exception{   
  66.         // 設置下載頭文件   
  67.         HttpServletResponse response = this.getResponse();   
  68.         response.setCharacterEncoding("UTF-8");   
  69.         response.setContentType("image/*");   
  70.            
  71.            
  72.         OutputStream output = response.getOutputStream();   
  73.            
  74.         infoImage = infoService.getInfoContentImageById(imageId);   
  75.         byte[] b = infoImage.getImagecontent();   
  76.         output.write(b);   
  77.            
  78.         return null;   
  79.     }  

 修改打開上傳窗口可以打開多個和打開的窗口不居中的原因，修改原來的image.js

Js代碼
  1. {type:'button',id:'myUpload',align:'center',label:'新上傳 ',onClick:function(){var thisDialog = this.getDialog();   
  2.  var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl'); var txtUrlId = txtUrlObj.getInputElement().$.id;    
  3. var retFile = window.open("info2j.zrx?path=info/info_uploadImage&infotypeid="+top.document.getElementById('infotypeid').value+"&txtUrlId="+txtUrlId, "上傳圖片", "height=300, width=400,top="+(screen.height-300)/2+",left="+(screen.width-400)/2); if(retFile != null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},  
本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
【轉】CKeditor粘貼圖片在IE下自動上傳的研究
Chrome Extension實戰：頁面注入
【分享】圣誕樹自定義鏈接版
總結JavaScript(Iframe、window.open、window.showModalDialog)父窗口與子窗口之間的操作
[JavaScript]window.open的post與get傳遞參數比較
java,javascript 內連取數據
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權！
如果VIP功能使用有故障，
可點擊這里聯系客服！

聯系客服

主站蜘蛛池模板： 阜新| 宝清县| 游戏| 古交市| 昭苏县| 新津县| 靖江市| 秀山| 遂川县| 佛坪县| 辽中县| 新建县| 习水县| 丰台区| 顺昌县| 防城港市| 介休市| 南汇区| 五指山市| 绵竹市| 乌鲁木齐市| 铜川市| 闻喜县| 邯郸市| 五原县| 昌黎县| 巩留县| 大关县| 绥阳县| 平江县| 河源市| 留坝县| 特克斯县| 黄大仙区| 隆尧县| 丁青县| 林周县| 师宗县| 绵竹市| 绥棱县| 灵石县|