`

使用CKeditor 上传图片

ckeditor图片上传 
阅读更多

要实现的效果

 

 

http://yitong.xiaodoutao.com/

 

 

1.---------------------------------------

 

找到ckeditor---->plugins---->image---->dialogs---->image.js文件

 

 

2.----------------------------------------

 

找到validate:CKEDITOR.dialog.validate.notEmpty(b.lang.image.urlMissing)},然后在后面添加

{type:'button',id:'myUpload',style:'display:inline-block;margin-top:10px;',align:'center',label:'新上传',onClick:function(){var retFile=showModalDialog('../common/uploadImage.jsp','','dialogHeight:20;dialogWidth:29;');if(retFile != null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},

 

 

3.新建uploadImage.jsp----------------使用jquery.ajaxfileupload.js异步上传图片--------------------------------

 

<script type="text/javascript" src="/common/js/jquery.ajaxfileupload.js"></script>

<script type="text/javascript">

$(function(){

$("#submit").click(function(){

 

var imgPath = document.getElementById("boy").value;

//alert(imgPath);

if(imgPath == null || imgPath == "")

{

alert("请浏览图片");

return false;

};

 

$.ajaxFileUpload({

 

async : false,

cache:false,

type: 'POST',

dataType : "text",

fileElementId:'boy',    //file的Id

url: "${ctx}/downloadCenter/saveImage.do",//请求的action路径

 

error: function () {//请求失败处理函数

alert('请求失败'); },

 

success:function(data){ //请求成功后处理函数。

//alert(data);

window.returnValue=data; //返回父页面

window.close();

}

})

});

});

 

</script>

 

</head>

 

<body>

 

<form action="" enctype="multipart/form-data" method="post" name="myform"> <br/>

<strong> <P>选择要上传的图片：</P></strong>

图片： <INPUT type="file" id="boy" name="file"> <BR><br/>

<INPUT type="button" value="提交" id="submit">&nbsp;&nbsp;<INPUT type="reset" value="取消"> </form>

</body>

</html>

 

上传所需要的action-----------------------------------------------------------------------------------------------------

 

/** * CKedit插件上传图片所使用的方法 * @throws IOException */ public void saveImage() throws IOException{ log.debug("dao.DownloadCenterAction.class method save : start"); DownloadCenter downloadCenter = new DownloadCenter(); String root = ServletActionContext.getRequest().getRealPath("upload"); HttpServletRequest request = ServletActionContext.getRequest (); String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; File dir = new File(root); if (dir.exists()==false){ dir.mkdir(); } try { for(int i = 0;i < file.size(); i++){ InputStream is = new FileInputStream(file.get(i)); File destFile = new File(root,this.getFileFileName().get(i)); OutputStream os = new FileOutputStream(destFile); byte[] buffer = new byte[1024]; int length = 0; while((length= is.read(buffer)) > 0){ os.write(buffer, 0, length); } is.close(); os.close(); } if (fileFileName != null || !fileFileName.equals("")) { for (int j = 0; j < fileFileName.size(); j++) { basePath = basePath+"upload/"+fileFileName.get(j); } } } catch (Exception e) {ss e.printStackTrace(); System.out.println("添加上传文件失败"); }finally{ System.err.println(basePath); getResponse().getWriter().print(basePath); log.debug("dao.DownloadCenterAction.class method save : end"); } }

http://yitong.xiaodoutao.com/

3
顶
3
踩
分享到：
| css样式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics