使用CKeditor 上传图片
要实现的效果
?
?
?
?
?
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"> <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) {sse.printStackTrace();System.out.println("添加上传文件失败");}finally{ System.err.println(basePath); getResponse().getWriter().print(basePath); log.debug("dao.DownloadCenterAction.class method save : end"); }}
