ckedit上传图片到数据库



 

 

 

 

 

 

 

 

 

 

 

 最近要实现在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)},后面加上这些代码:

{type:'button',id:'myUpload',align:'center',label:'新上传 ',onClick:function(){var thisDialog = this.getDialog();var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl'); var txtUrlId = txtUrlObj.getInputElement().$.id; 
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的简单代码

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
	<head>
		
		<title>上传图片</title>
		<script type="text/javascript">
		
		function checkFormat(filePath){
			var i = filePath.lastIndexOf(".");
			var len = filePath.length;
			var str = filePath.substring(i+1,len);
			var extName = "JPG,GIF,PNG,BMP";
		
			if(extName.indexOf(str.toUpperCase()) < 0){
				alert("图片格式不正确");
				return false;
			}
			return true;
			
		}
		
		/*
		图标预览,兼容ie,firefox
		*/
		function fileChange(o){
			if(checkFormat(o.value)){
				if(window.ActiveXObject){
					document.getElementById("uploadImg").width = 100;
					document.getElementById("uploadImg").height = 100;
					document.getElementById("uploadImg").src = o.value;
				}else{
					document.getElementById("uploadImg").width = 100;
					document.getElementById("uploadImg").height = 100;
					document.getElementById("uploadImg").src = o.files[0].getAsDataURL();
				}
				
			}
		}

	   /* 给图片text附上图片地址*/
       function finish(generatedId){
       		//获得图片text的id
       		var imageUrl = document.getElementById("txtUrlId").value;
		   
		    alert("<s:text name='info.upload.success' />!");
		   
			window.opener.document.getElementById(imageUrl).value = "info_downloadImage.zrx?imageId="+generatedId;
			window.opener.document.getElementById("previewImage").setAttribute("src","info_downloadImage.zrx?imageId="+generatedId);
		    window.close();
	 }
       
    </script>

	</head>

	<body>
		
		
		<s:form id="uploadForm" name="uploadForm" method="post" action="info_upLoadImage.zrx" theme="simple"
			enctype="multipart/form-data"  target="frame">
			<s:hidden id="infotypeid" name="infotypeid"></s:hidden>
			<s:hidden id="txtUrlId" name="txtUrlId"></s:hidden>
			<table align="center">
				<tr>
					<td colspan="2"><s:file id="image" name="image" οnchange="return fileChange(this)" /></td>
				</tr>
				<tr>
					<td><input type="submit" value="上传" οnclick="upload()"/></td>
					<td><input type="button" value="取消" οnclick="javascript:window.close();"/></td>
				</tr>
			</table>
			<div align="center">
				<img src="" width="0" height="0" id="uploadImg"/>
			</div>
			
			</s:form>
		
		
		<iframe name="frame" style="display:none"  src="_self">
			
		</iframe>
	</body>
</html>

 

下面是上传图片和下载图片方法

/**
	* 方法名:upLoadImage
	* 作者: 
	* 描述: 在信息内容编辑区上传图片到数据库
	* @return
	* @throws Exception
	* 日期:2010-4-20
	*/
	public String upLoadImage() throws Exception{
		
        if (null != image) {
            //上传图片
           
        	   infoImage = new InfoContentImage();

                String imageName = imageFileName; // 文件真名
                String imageType = imageContentType;
                Long length = image.length(); // 文件的真实大小

                // 设定InfoAttach对象的属性
                infoImage.setInfotypeid(new Long(infotypeid));
                infoImage.setImagename(imageName);
                infoImage.setImagetype(imageType);
                infoImage.setImagesize(length);
                infoImage.setDate(new Date());

                // 将上传的文件保存到数据库

                try {
                    InputStream is = new BufferedInputStream(new FileInputStream(image));

                    ByteArrayOutputStream os = new ByteArrayOutputStream();
                    int len = 0;
                    byte[] content = new byte[is.available()];

                    while (-1 != (len = is.read(content))) {
                        os.write(content);
                    }
                    infoImage.setImagecontent(os.toByteArray());
                    is.close();
                    os.close();
                } catch (Exception e) {
                    e.printStackTrace();
                }
        }
		
        
        Long generatedId = this.infoService.saveInfoContentImage(infoImage);
		
		this.writeMessage("<script type='text/javascript'>parent.finish('"+ generatedId +"');</script>");
		return null;
	}


	
	
	/**
	* 方法名:downloadImage
	* 作者: 
	* 描述:
	* @return
	* @throws Exception
	* 日期:2010-4-21
	*/
	public String downloadImage() throws Exception{
		// 设置下载头文件
		HttpServletResponse response = this.getResponse();
		response.setCharacterEncoding("UTF-8");
		response.setContentType("image/*");
		
		
		OutputStream output = response.getOutputStream();
		
		infoImage = infoService.getInfoContentImageById(imageId);
		byte[] b = infoImage.getImagecontent();
		output.write(b);
		
		return null;
	}

 修改打开上传窗口可以打开多个和打开的窗口不居中的原因,修改原来的image.js

{type:'button',id:'myUpload',align:'center',label:'新上传 ',onClick:function(){var thisDialog = this.getDialog();
 var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl'); var txtUrlId = txtUrlObj.getInputElement().$.id; 
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);}}},

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值