Kindeditor实现图片上传

最新推荐文章于 2024-07-18 15:01:31 发布
最新推荐文章于 2024-07-18 15:01:31 发布
阅读量1k 收藏 2
点赞数 4
分类专栏： Kindeditor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiPengBo666/article/details/78867175
版权

一.导入依赖-->添加'编辑器'

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>添加宣传任务</title>
		<!-- 导入jquery核心类库 -->
		<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
		<!-- 导入easyui类库 -->
		<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../../css/default.css">
		<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
		<script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<script type="text/javascript" src="../../editor/kindeditor.js"></script>
		<script type="text/javascript" src="../../editor/lang/zh_CN.js"></script>
		<link rel="stylesheet" type="text/css" href="../../editor/themes/default/default.css" />
		<script type="text/javascript">
			$(function() {
				$("body").css({
					visibility: "visible"
				});
				$("#back").click(function() {
					location.href = "promotion.html";
				});
				//页面提供<textarea>文本框
				KindEditor.ready(function(K) {
					window.editor = K.create('#description', {
						items: [
							'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
							'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
							'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
							'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
							'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
							'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
							'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
							'anchor', 'link', 'unlink', '|', 'about'
						],
						allowFileManager: true,
						uploadJson: '../../image_upload.action',
						//图片上传
						fileManagerJson: '../../image_manage.action'
					});
				});
				$("#save").click(function() {
					if($("#promotionForm").form('validate')) {
						//通过kindEditor提交textarea默认是不自动提交,需手动提交
						window.editor.sync();
						//提交表单
						$("#promotionForm").submit();
					} else {
						//校验失败
						$.messager.alert("校验失败", "表单存在非法数据", "warning");
					}
				});
			});
		</script>
	</head>

	<body class="easyui-layout" style="visibility:hidden;">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false">
			<div class="datagrid-toolbar">
				<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存</a>
				<a id="back" icon="icon-back" href="#" class="easyui-linkbutton" plain="true">返回列表</a>
			</div>
		</div>
		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form id="promotionForm" method="post" enctype="multipart/form-data" action="../../promotion_save.action">
				<table class="table-edit" width="95%" align="center">
					<tr class="title">
						<td colspan="4">宣传任务</td>
					</tr>
					<tr>
						<td>宣传概要(标题):</td>
						<td colspan="3">
							<input type="text" name="title" id="title" class="easyui-validatebox" required="true" />
						</td>
					</tr>
					<tr>
						<td>活动范围:</td>
						<td>
							<input type="text" name="activeScope" id="activeScope" class="easyui-validatebox" />
						</td>
						<td>宣传图片:</td>
						<td>
							<input type="file" name="titleImgFile" id="titleImg" class="easyui-validatebox" required="true" />
						</td>
					</tr>
					<tr>
						<td>发布时间: </td>
						<td>
							<input type="text" name="startDate" id="startDate" class="easyui-datebox" required="true" />
						</td>
						<td>失效时间: </td>
						<td>
							<input type="text" name="endDate" id="endDate" class="easyui-datebox" required="true" />
						</td>
					</tr>
					<tr>
						<td>宣传内容(活动描述信息):</td>
						<td colspan="3">
							<textarea id="description" name="description" style="width:80%" rows="20"></textarea>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>

</html>


2.编辑器效果


3.编辑器点击上传图片,-->编写上传图片action(  uploadJson: '../../image_upload.action',)

package cn.itcast.bos.web.action.base;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.UUID;

import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

@ParentPackage("json-default")
@Namespace("/")
@Controller
@Scope("prototype")
public class ImageAction extends ActionSupport implements ModelDriven<Object> {

	@Override
	public Object getModel() {
		return null;
	}

	private File imgFile;				//文件
	private String imgFileFileName;		//文件名
	private String imgFileContentType;	//文件类型
	
	public void setImgFile(File imgFile) {
		this.imgFile = imgFile;
	}

	public void setImgFileFileName(String imgFileFileName) {
		this.imgFileFileName = imgFileFileName;
	}

	public void setImgFileContentType(String imgFileContentType) {
		this.imgFileContentType = imgFileContentType;
	}

	@Action(value = "image_upload", results = { @Result(name = "success", type = "json") })
	public String upload() throws IOException {
		System.out.println("文件"+imgFile);
		System.out.println("文件名"+imgFileFileName);
		System.out.println("文件类型"+imgFileContentType);
		String savePath = ServletActionContext.getServletContext().getRealPath("/upload/");
		String saveURl = ServletActionContext.getRequest().getContextPath()+"/upload/";
		
		//生成图片随机名字
		UUID randomUUID = UUID.randomUUID();
		String substring = imgFileFileName.substring(imgFileFileName.lastIndexOf("."));
		String randomFileName=randomUUID+substring;
		
		//保存图片(绝对路径)
		File destFile = new File(savePath+"/"+randomFileName);
		FileUtils.copyFile(imgFile, destFile);
		
		//通知浏览器上传成功
		HashMap<String,Object> hashMap = new HashMap<String, Object>();
		hashMap.put("error",0);
		hashMap.put("url", saveURl+randomFileName);		//返回相对路径
		ActionContext.getContext().getValueStack().push(hashMap);
		
		return SUCCESS;
	}
}

注意:Action中的文件,文件名,文件类型字段名子必须和页面HTML的''宣传照片''标签name属性名子一致;

二,表单提交

1.填写表格,进入Action 

package cn.itcast.bos.web.action.base;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import cn.itcast.bos.domain.take_delivery.Promotion;
import cn.itcast.bos.service.base.PromotionService;

import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
@ParentPackage("json-default")
@Namespace("/")
@Controller
@Scope("prototype")
public class PromotionAction extends ActionSupport implements ModelDriven<Promotion>{
	private File titleImgFile; // 文件
	private String titleImgFileFileName; // 文件名

	
	public void setTitleImgFile(File titleImgFile) {
		this.titleImgFile = titleImgFile;
	}

	public void setTitleImgFileFileName(String titleImgFileFileName) {
		this.titleImgFileFileName = titleImgFileFileName;
	}
	private Promotion promotion = new Promotion();
	@Override
	public Promotion getModel() {
		return promotion;
	}
	@Autowired
	private PromotionService promotionService;
	
	@Action(value="promotion_save",results={@Result(name="success",type="redirect",location="./pages/take_delivery/promotion.html")})
	public String save() throws IOException{

		String savePath = ServletActionContext.getServletContext().getRealPath(
				"/upload/");
		String saveURl = ServletActionContext.getRequest().getContextPath()
				+ "/upload/";
		// 生成图片随机名字
		UUID randomUUID = UUID.randomUUID();
		String substring = titleImgFileFileName.substring(titleImgFileFileName
				.lastIndexOf("."));
		String randomFileName = randomUUID + substring;

		// 保存图片(绝对路径)
		File destFile = new File(savePath + "/" + randomFileName);
		FileUtils.copyFile(titleImgFile, destFile);
		//将保存路径 相对工程web访问路径保存到对象当中
		promotion.setTitleImg(ServletActionContext.getRequest().getContextPath()
				+ "/upload/"+randomFileName);
		promotionService.save(promotion);
		return SUCCESS;
	}
}

LiPengBo666
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
KindEditor上传图片及使用
私信可回答各种问题~
10-24 3127
KindEditor上传图片及使用
为 KindEditor 实现图片上传
05-25
NULL 博文链接：https://libudi.iteye.com/blog/477728
KindEditor编辑器上传图片
dabao87的博客
09-21 2757
下载： KindEditor 4.1.11 (2016-03-31) [1143KB] html代码：  &lt;div class="form-group"&gt; &lt;label&gt;内容&lt;/label&gt; &lt;textarea name="content" rows="20" class="form-control"&
django框架与kindeditor富文本编辑器的上传图片解决
最新发布
qq_47802935的博客
07-18 278
在做项目过程中遇到问题：1.kindeditor如何引用？2.如何解决django中csfr_token在ajax请求中携带得问题3.图片存储位置与回显？接下做我们逐步解决。
Kind Editor 编辑器 图片上传
fulerbakesi
06-13 131
KindEditor 编辑器 图片上传 最近接触到了html文本的存储。 以前没有涉及这么全面的html + 图片 上传。 今天用KindEditor 做了一些功能。 我的项目用spring mvc+mybatis 整的。 贴出我的前端和后端代码 。供新手参考。 不用多余jar。 跟普通上传图片差不多。 前端js代码 var editor; KindEditor.read...
KindEditor上传图片
Strive279的博客
11-10 4054
KindEditor相关介绍以及下载可查看http://blog.csdn.net/mytt_10566/article/details/78062205。本篇主要关于上传图片，结合Spring MVC处理文件上传。 1.初始化编辑器 配置可参照KindEditor文档：http://kindeditor.net/docs/upload.html文档中uploadJson属性配置的是…/kindeditor/jsp/upload_json.jsp，我们可以参照该jsp修改成对应ImageControlle
KINDEDITOR编辑器复制粘贴图片上传
alisky119的博客
04-01 783
编辑器用的是KindEditor，需要为KindEditor增加复制粘贴图片的功能，复制word图片，复制本地图片，复制后粘贴到编辑器中，自动上传到服务器中。返回图片地址HTML，PostUrl请使用完整路径（http://www.qq.com/upload.jsp），不要使用相对路径（/upload.jsp）。需要为KindEditor编辑器增加粘贴Word图片的功能，粘贴后图片能够自动上传到服务器中，服务器地址能够自定义。用户使用操作起来更方便一些，一般发新闻，或者发文章用的比较多，可以说是高频使用，
nodejs 整合kindEditor实现图片上传
10-24
在介绍nodejs整合kindEditor实现图片上传的过程中，首先需要了解几个关键组件：node.js、Express框架、formidable模块以及kindEditor编辑器。接下来将详细展开这些知识点。 node.js是一个基于Chrome V8引擎的...
asp.net core集成kindeditor实现图片上传功能
10-21
将KindEditor集成到*** Core项目中实现图片上传功能，需要完成以下步骤： 1. 准备工作：需要具备Visual Studio 2015 Update 3或更高版本的开发环境，以及.NET Core 1.0.1或更高版本的运行环境。 2. 创建*** Core ...
kindeditor编辑器上传图片
angzhuo9931的博客
11-26 132
使用的是asp.net MVC 上传图片。 1.下载Kindeditor的对应的包 2.html页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"...
KindEditor 4.1.11 完整图片上传 表单提交Demo
05-10
java语言。包含上传图片，回显url，预览图片，提交表单等基本功能 springboot项目
kindeditor文本编辑器实例（包含本地图片上传及浏览服务器方法）
05-30
kindeditor文本编辑文本编辑器实例 功能包含实现功能包含： 本地图片上传，浏览服务器，自定义编辑器按钮等
kindeditor编辑器，可上传多图片，文件上传等功能
06-27
个人项目，公司项目都使用的是这个编辑器， 个人觉得还不错，使用也很方便简单，功能比较全， 有兴趣的自己可以二次开发，不会使用的也可以扣我，
node.js kindeditor上传图片
dexing07的博客
12-28 1252
首先要搞清楚图片上传的原理1.客户端读取文件，获取图片详情。 2.客户端将图片转换为利于传输的格式（数据流），包括图片各种参数。 3.服务器接收到数据流，再转换成.jpg/.png等格式的图片，写入服务器某个文件夹。 4.返回该地址，并显示到页面中。其中的难点，就在于客户端接收数据的处理方式。 还有传回页面的文件地址。现在要讨论的是以：node.js kindeditor上传图片为例。1 .
java ueditor 图片上传加水印_百度ueditor上传图片加水印的例子
weixin_29928971的博客
03-07 144
百度ueditor上传图片默认没有水印功能的如果我们要添加水印需要在程序上进行一些添加了，下面来看看百度ueditor上传图片加水印的例子吧。打开UEditor压缩包下php目录中的上传类文件：Uploader.class.php在上传文件的主要方法下添加调用水印处理方法：代码如下/***上传文件的主处理方法*@returnmixed*/privatefunctionupFile(){…...
如何将word图片粘贴到KindEditor里面
weixin_45525177的博客
06-03 993
如何将word图片粘贴到KindEditor里面，KindEditor粘贴word图片，KindEditor粘贴word，KindEditor粘贴word图文，KindEditor粘贴word内容，KindEditor粘贴word文档，KindEditor一键粘贴word，KindEditor一键粘贴word图片，KindEditor一键粘贴word图文，KindEditor一键粘贴word文档，最近听同事抱怨发布新闻太繁琐了，word中的图片太多了，每次发新闻都要手动一张张上传图片，太累了，
KindEditor 图片粘贴上传，实现图文粘贴，图片自动上传
Mr_Zang666的博客
08-07 302
hello
kindeditor编辑器复制粘贴图片上传
Mr_Zang666的博客
07-05 312
这种方法是servlet，编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台（服务端）java服务代码：（上传至ROOT/lqxcPics文件夹下） <%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%@ pagecontentType="text/html;charset=utf-8"%><%@ pageim...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值