kindeditor图片上传 struts2实现

一、kindeditor以及struts2部署搭建不再赘述,如需要请参考kindeditor使用方法 Struts2框架搭建

二、kindeditor图片上传所依赖jar包在kindeditor\jsp\lib下有

三、以下列出部分核心代码,如需要全部源码可点击下载(待上传)


JSP

<textarea id="editor_id" name="content" style="width:950px;height:300px;">
	这里输入内容...
</textarea>
<script type="text/javascript">
   $(function(){
	KindEditor.ready(function(K) {
	       var editor1 = K.create(‘#editor_id‘, {
	        //自定义工具栏
		items:[
			‘code‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘,
			‘justifyfull‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘indent‘, ‘outdent‘,
			‘clearhtml‘, ‘quickformat‘, ‘selectall‘, ‘|‘, ‘fullscreen‘,
			‘formatblock‘, ‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘,
			‘italic‘, ‘underline‘, ‘strikethrough‘, ‘lineheight‘, ‘removeformat‘,
			‘|‘, ‘image‘, ‘multiimage‘,
			‘insertfile‘, ‘table‘, ‘hr‘, ‘emoticons‘, ‘baidumap‘, ‘pagebreak‘,
			‘anchor‘, ‘link‘, ‘unlink‘
		],
		uploadJson : ‘ImgUpload.action‘, //图片上传Action
		allowImageRemote : false //取消网络图片上传
		});
	 });
   })
</script>

Struts

<package name="kindeditor_json" extends="json-default">
	<!-- 图片上传 -->
	<action name="ImgUpload" class="com.home.web.ImgUploadAction" method="imgUpload">
	</action>
</package>

Action

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Random;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper;
import org.json.simple.JSONObject;

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

public class ImgUploadAction extends ActionSupport {
	private static final long serialVersionUID = 1L;

	public String imgUpload() {
		//获取response、request对象
		ActionContext ac = ActionContext.getContext();
		HttpServletResponse response = (HttpServletResponse) ac.get(ServletActionContext.HTTP_RESPONSE);
		HttpServletRequest request = (HttpServletRequest) ac.get(ServletActionContext.HTTP_REQUEST);

		PrintWriter out = null; //输出流
		try {
			out = response.getWriter();
		} catch (IOException e1) {
			e1.printStackTrace();
		}

		String savePath = ServletActionContext.getServletContext().getRealPath("/") + "attached/";

		// 文件保存目录URL
		String saveUrl = request.getContextPath() + "/attached/";

		// 定义允许上传的文件扩展名
		HashMap<String, String> extMap = new HashMap<String, String>();
		extMap.put("image", "gif,jpg,jpeg,png,bmp");
		extMap.put("flash", "swf,flv");
		extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
		extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");

		// 最大文件大小
		long maxSize = 1000000;

		response.setContentType("text/html; charset=UTF-8");

		if (!ServletFileUpload.isMultipartContent(request)) {
			out.println(getError("请选择文件。"));
			return null;
		}
		// 检查目录
		File uploadDir = new File(savePath);
		if (!uploadDir.isDirectory()) {
			out.println(getError("上传目录不存在。"));
			return null;
		}
		// 检查目录写权限
		if (!uploadDir.canWrite()) {
			out.println(getError("上传目录没有写权限。"));
			return null;
		}

		String dirName = request.getParameter("dir");
		if (dirName == null) {
			dirName = "image";
		}
		if (!extMap.containsKey(dirName)) {
			out.println(getError("目录名不正确。"));
			return null;
		}
		// 创建文件夹
		savePath += dirName + "/";
		saveUrl += dirName + "/";
		File saveDirFile = new File(savePath);
		if (!saveDirFile.exists()) {
			saveDirFile.mkdirs();
		}
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
		String ymd = sdf.format(new Date());
		savePath += ymd + "/";
		saveUrl += ymd + "/";
		File dirFile = new File(savePath);
		if (!dirFile.exists()) {
			dirFile.mkdirs();
		}

		FileItemFactory factory = new DiskFileItemFactory();
		ServletFileUpload upload = new ServletFileUpload(factory);
		upload.setHeaderEncoding("UTF-8");
		MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request;
		// 获得上传的文件名
		String fileName = wrapper.getFileNames("imgFile")[0];// imgFile,imgFile,imgFile
		// 获得文件过滤器
		File file = wrapper.getFiles("imgFile")[0];

		// 检查扩展名
		String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
		if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {
			out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName)
					+ "格式。"));
			return null;
		}
		// 检查文件大小
		if (file.length() > maxSize) {
			out.println(getError("上传文件大小超过限制。"));
			return null;
		}

		// 重构上传图片的名称
		SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
		String newImgName = df.format(new Date()) + "_"
				+ new Random().nextInt(1000) + "." + fileExt;
		byte[] buffer = new byte[1024];
		// 获取文件输出流
		FileOutputStream fos;
		// 获取内存中当前文件输入流
		InputStream in;
		try {
			fos = new FileOutputStream(savePath + "/" + newImgName);
			in = new FileInputStream(file);
			int num = 0;
			while ((num = in.read(buffer)) > 0) {
				fos.write(buffer, 0, num);
			}
			in.close();
			fos.close();
		} catch (FileNotFoundException e1) {
			e1.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}

		// 发送给 kindeditor
		JSONObject obj = new JSONObject();
		obj.put("error", 0);
		obj.put("url", saveUrl + "/" + newImgName);
		out.println(obj.toJSONString());
		return null;
	}

	private String getError(String message) {
		JSONObject obj = new JSONObject();
		obj.put("error", 1);
		obj.put("message", message);
		return obj.toJSONString();
	}
}

kindeditor有自带的jsp图片上传demo

uploadJson : ‘../jsp/upload_json.jsp‘

但如果按照upload_json.jsp中的程序进行上传时执行到

List items = upload.parseRequest(request);
Iterator itr = items.iterator();
while (itr.hasNext()) {}

发现itr为空 取不到上传文件 故没有执行while循环,也就没有返回值,kindeditor报服务器错误.为什么取不到值,是因为:

struts2过滤访问jsp时,会改变reqeust的类型,由HttpServletRequest变成MultiPartRequestWrapper,所以parseRequest就返回了null

于是我们就需要对request进行转换

MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request;

这样就可以通过wrapper获取上传文件

String fileName = wrapper.getFileNames("imgFile")[0];
File file = wrapper.getFiles("imgFile")[0];

效果如图:

作者:itmyhome

源码:稍等,待上传

时间: 2024-10-08 10:17:48

kindeditor图片上传 struts2实现的相关文章

KindEditor图片上传到七牛云

自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEditor的源码和七牛的SDK看得云里雾里的,网上搜索又没有类似的解决方法,只好继续看源码自己搞了,弄了整整一个晚上,基本实现了,下面说说我的做法: 版本说明: KindEditor版本:4x 七牛SDK:7.x.x 后端脚本:PHP 先看一下七牛给出的表单模板,在这里file和token这两个表单项是必须

MVC 中使用kindEditor 图片上传在IE 上进行上传出现的问题

在IE 上使用KindEditor 进行单张图片上传的时候会出现一个下载安全警告,这样将会造成图片上传失败,出现的错误页面: 将会出现这样的一个警告信息. 解决方案,: 是将上传的UpdataloadDetailsImg 方法的返回值 修改为 void 错误代码: public ActionResult UpdateloadDetailsImg() { string imageRemotePath = this.UploadImg(); if (!string.IsNullOrWhiteSpac

Kindeditor图片上传Controller

asp.net MVC Kindeditor 图片.文件上传所用的Controller 1 [HttpPost, AllowAnonymous] 2 public ActionResult UploadImage() 3 { 4 string savePath = VirtualPaths.ImgDir + "/Upload/"; 5 string saveUrl = "/Upload/"; 6 string fileTypes = "gif,jpg,jp

KindEditor图片上传

KindEditor参数配置 <script> KindEditor.ready(function(K) { var editor1 = K.create('textarea[name="content"]', { uploadJson : '{{asset('/blue_cross_admin/article/uploads')}}', allowFileManager : false, items:['source', '|', 'fullscreen', 'undo'

kindeditor 图片上传

视图函数 CONTENT = "" from app01.forms import ArticleForm def wangzhe(request): if request.method == "GET": obj = ArticleForm() return render(request,'wangzhe.html',{'obj':obj}) else: obj = ArticleForm(request.POST) if obj.is_valid(): cont

Django配置图片上传

本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL  和 MEDIA_ROOT 在 D:\blog_project  下建立文件夹 uploads MEDIA_URL = '/uploads/' # 上传图片的路径:D:\blog_project\uploads MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads') # 上传图片的根路径 BASE_DIR:

xhEditor struts2实现图片上传

xhEditor的环境搭建请参考http://blog.csdn.net/itmyhome1990/article/details/38422255,这时我们打开图片功能 是没有上传按钮的 如果想要出现上传按钮,在xhEditor设置以下参数: html5Upload : false                     //此属性必须为false upImgUrl : "ImgUpload.action" //上传服务器接口 onUpload : insertUpload     

kindeditor更改图片上传时网络图片的路径

当我们想要使用kindeditor的图片上传功能时,有两种选择图片方式,一种是本地选择,一种是在图片空间中选择,图片空间的默认地址是服务器上的/kindeditor/attached/image/下面. 如果想要改变这个路径,需要找到/kindeditor/php/file_manager_json.php这个文件,然后可以看到下面几行: //根目录路径,可以指定绝对路径,比如 /var/www/attached/ $root_path = $php_path . '../attached/';

使用Kindeditor的多文件(图片)上传时出现上传失败的解决办法/使用Flash上传多文件(图片)上传时上传失败的解决办法

近来用户反映希望我们把在线编辑器中的多图片上传功能实现,因为他们在编辑商品描述时经常会有一次上传多张图片的需求,如果要逐张选择的话效率很低,客户的需求就是我们的追求,很快我们就把完善功能排到了日程表中,要求尽快实现. 我们在项目中使用的在线编辑器是Kindeditor4.1.10,它们的多文件上传插件是使用Flash实现的,原本应该就是能使用的,但为什么老是显示上传失败的,百度了一下前人的经验和教训,出现这种情况,有两种可能:1)上传的目标文件夹没有写权限,导致上传的文件无法进行写操作,所以上传