要实现的效果
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"> <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/
分享到：
相关推荐
以下是使用CKEditor在C# MVC中实现图片上传的详细步骤和关键知识点： 首先，你需要从CKEditor官网（http://ckeditor.com/builder）下载所需的插件。在网站上，你可以根据项目需求选择并定制编辑器的功能，例如仅...
在Aspx页面中，使用ckeditor上传图片可以将图片上传到服务器，并将图片路径存放到textarea中，以达到word中的图文混排效果。下面是相关知识点的详细解释： 一、CKEditor的基本概念 CKEditor是一个功能强大的在线富...
"ckeditor上传图片"这个主题主要涉及的是CKEditor与服务器端交互，实现图片的上传功能。下面我们将深入探讨这个知识点。 首先，`ckeditorUploadImgApi.java`和`ckeditorUploadImgController.java`是Java后端处理...
**ckeditor自定义上传图片** 在使用ckeditor作为富文本编辑器时，经常需要集成图片上传功能。ckeditor是一款强大的在线文本编辑器，它提供了丰富的文本格式化工具，使得在网页上编辑内容变得简单。然而，ckeditor...
CKEditor的一个重要特性是支持用户直接在编辑器内部上传图片和文件，提高了内容创作的效率。本文将详细讲解如何在CKEditor中实现图片和文件的上传功能，并探讨相关的核心知识点。 首先，`ckeditorUploadImgApi.java...
在ASP.NET应用中，CKEditor5是一款常用的富文本编辑器，它提供了丰富的文本格式化功能，包括图片上传。本文将详细介绍如何在ASP.NET环境中集成CKEditor5并实现图片上传功能。 首先，我们需要在项目中引入CKEditor5...
Ckeditor上传图片！本身Ckeditor不具备上传图片功能的！前两天在一个博客园的一个博主那里讨了点Ckeditor上传图片的方法，现在共享给大家！博主的博客地址和实现方式我压缩在文件中了！大家支持正版哈！
在CKEditor 3.6.0版本中，它提供了文件上传功能，使得用户可以直接在编辑器内上传图片或其他文件，极大地提高了内容创作的便利性。本教程将详细介绍如何通过Servlet来实现CKEditor的文件上传功能。 首先，我们需要...
利用jsp实现ckeditor_3_6_2 上传图片功能，里面包含完整的工程，不过需要自己引入commons-fileupload-1.2.1.jar,commons-io-1.4.jar文件上传包，网上一大把。只要能正确引入，该工程就能完成
这个ckeditor的version为4.6.1,。 主要是添加了拖拽上传图片个上传视频的功能， 具体教程看博文：http://blog.csdn.net/u014044812/article/details/53897024
现在，CKEditor已经可以正常使用，但还没有图片上传功能。要添加此功能，我们需要配置CKEditor的`filebrowserBrowseUrl`和`filebrowserUploadUrl`属性。这两个属性分别指定了浏览服务器上的文件和上传新文件的URL。...
总的来说，CKEditor与CKFinder的组合为富文本编辑中的图片上传提供了一种强大且易于使用的解决方案。虽然这需要一些服务器端的配置工作，但一旦设置完成，用户就能享受到流畅的图片插入体验，这对于内容创作者来说是...
在asp中使用ckeditor开启图片上传功能的设置方法： 1、下载asp版本的ckfinder，放到ckeditor目录下 2、修改ckeditor\config.js,加上如下内容： CKEDITOR.editorConfig = function( config ) { config.scayt_...
本项目以"CKEditor 上传图片"为主题，结合Struts2.1框架，详细介绍了如何利用Struts的上传功能来实现这一功能。 Struts2是基于MVC（Model-View-Controller）设计模式的Java Web开发框架，它简化了Web应用的开发过程...
return cb(new Error('只允许上传图片或视频文件')); } cb(null, true); }, }); app.post('/api/upload', upload.single('upload'), (req, res) => { const { filename } = req.file; res.json({ success: ...
《ckeditor上传图片完善版》是一款基于CKEditor的增强型插件，它允许用户在编辑器中方便地上传图片和文件，极大地丰富了内容创作的体验。CKEditor是一款广泛使用的富文本编辑器，常用于网站、博客和论坛等平台，提供...
在CKEditor的配置中，你可以使用`config.filebrowserImageUploadUrl`来指定图片上传的URL。例如： ```javascript CKEDITOR.replace('editor1', { filebrowserImageUploadUrl: '/upimg.aspx', // 其他配置... }); ...
近日要用到CKEditor实现图片上传，网上找了好多代码，要么跑不起来，要么不全，比如不知道如何返回值。跳了不少坑，现在彻底搞定。 目前上传用的是ASP.NET,可以随便切换成PHP、JAVA或其它的语言 只需要把ckeditor...
在这个“ASP+Ckeditor上传图片配置Demo和文档说明”的资源中，我们将探讨如何在ASP.NET环境中集成CKEditor，并实现图片上传功能。 1. **CKEditor介绍**： - CKEditor是一款开源的JavaScript富文本编辑器，支持多种...
在我们的例子中，JSP将处理CKEditor上传的图片请求，包括接收文件、存储文件到服务器以及返回响应信息。 CKEditor的图片上传通常涉及以下几个步骤： 1. **配置CKEditor**：在CKEditor的配置文件（config.js）中，...