KindEditor 在线编辑器 自定义文件上传与图片管理器实现

引入:
kindeditor.js


前台页面


KindEditor.ready(function(K) {

//初始化编辑器

window.editor = K.create('#promorionText', {

//容器的各项功能

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'
],

//本地图片上传

uploadJson: '../../image_upload.action',

//图片空间管理

fileManagerJson: '../../image_manage.action',

//指定是否开启【浏览服务器】功能

allowFileManager: true
}


);


});


后台接收

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
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 cn.action.common.BaseAction;

/**
 * @date 日期:2017年11月18日
 * @author 作者:kaisen
 *
 *
 */
@ParentPackage("json-default")
@Namespace("/")
@Controller
@Scope("prototype")
public class ImageAction extends BaseAction<Object> {

	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() {
		// 接收文件名及文件
		System.out.println("文件:" + imgFile);
		System.out.println("文件名:" + imgFileFileName);
		System.out.println("文件类型:" + imgFileContentType);
		// 绝对路径
		String savePath = ServletActionContext.getServletContext().getRealPath("/upload/");
		// 相对路径
		System.out.println(savePath);
		String saveUrl = ServletActionContext.getRequest().getContextPath() + "/upload/";
		// 将文件保存到磁盘上
		// 图片名随机
		String uid = UUID.randomUUID().toString().replace("-", "");
		String ext = imgFileFileName.substring(imgFileFileName.lastIndexOf("."));
		String randomFileName = uid + ext;

		// 保存文件
		File destFile = new File(savePath + "/" + randomFileName);
		System.out.println(destFile.getAbsolutePath());
		try {
			FileUtils.copyFile(imgFile, destFile);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		// 将文件路径返回至浏览器
		// 通知浏览器文件上传成功
		Map<String, Object> result = new HashMap<String, Object>();
		result.put("error", 0);
		result.put("url", saveUrl + randomFileName); // 返回相对路径
		ActionContext.getContext().getValueStack().push(result);

		return SUCCESS;
	}





	//图片空间管理
	@Action(value = "image_manage", results = { @Result(name = "success", type = "json") })
	public String imageManage() {
		String rootPath = ServletActionContext.getServletContext().getRealPath("/") + "upload/";
		// 根目录URL,可以指定绝对路径,比如 http://www.yoursite.com/attached/
		String rootUrl = ServletActionContext.getRequest().getContextPath() + "/upload/";
		// 遍历目录取的文件信息
		List<Map<String, Object>> fileList = new ArrayList<Map<String, Object>>();
		// 当前上传目录
		File currentPathFile = new File(rootPath);
		// 图片扩展名
		String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png", "bmp" };

		if (currentPathFile.listFiles() != null) {
			for (File file : currentPathFile.listFiles()) {
				Map<String, Object> hash = new HashMap<String, Object>();
				String fileName = file.getName();
				if (file.isDirectory()) {
					hash.put("is_dir", true);
					hash.put("has_file", (file.listFiles() != null));
					hash.put("filesize", 0L);
					hash.put("is_photo", false);
					hash.put("filetype", "");
				} else if (file.isFile()) {
					String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
					hash.put("is_dir", false);
					hash.put("has_file", false);
					hash.put("filesize", file.length());
					hash.put("is_photo", Arrays.<String> asList(fileTypes).contains(fileExt));
					hash.put("filetype", fileExt);
				}
				hash.put("filename", fileName);
				hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified()));
				fileList.add(hash);
			}
		}
		Map<String, Object> result = new HashMap<String, Object>();
		result.put("moveup_dir_path", "");
		result.put("current_dir_path", rootPath);
		result.put("current_url", rootUrl);
		result.put("total_count", fileList.size());
		result.put("file_list", fileList);
		ActionContext.getContext().getValueStack().push(result);
		return SUCCESS;
	}
}



  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: KindEditor编辑器可以通过以下步骤上传多张图片: 1. 点击编辑器中的“插入图片”按钮。 2. 在弹出的对话框中,选择“上传图片”选项卡。 3. 点击“选择文件”按钮,选择要上传图片文件。 4. 重复步骤3,选择多张图片文件。 5. 点击“开始上传”按钮,等待上传完成。 6. 上传完成后,可以在“已上传图片”选项卡中查看已上传图片。 7. 选中要插入的图片,点击“确定”按钮即可插入到编辑器中。 注意:上传多张图片时,需要等待每张图片上传完成后再选择下一张图片,否则可能会导致上传失败。 ### 回答2: kindeditor是一款非常常用的富文本编辑器,它不仅提供了基本的文本编辑功能,而且还支持上传多张图片的功能。下面就详细介绍一下如何使用kindeditor上传多张图片。 1. 准备工作 首先,在使用kindeditor上传多张图片之前,我们需要先准备好以下内容: ① kindeditor编辑器文件 ② kindeditor上传图片的处理程序文件,这个一般是后台开发人员编写的 ③ 存储上传图片的文件夹,这个一般由后台开发人员在处理程序中设置。 2. 设置kindeditor编辑器 在前端页面中,我们需要先引入kindeditor编辑器的相关文件。这些文件一般包括kindeditor.js和kindeditor.css等。引入之后,我们需要对kindeditor进行一些基本设置,如设置编辑器的宽度、高度等。同时,还需要在配置文件中设置上传图片的选项。 其中,设置上传图片的选项需要设置上传图片的处理程序地址、允许上传图片类型、最大可以上传图片大小、是否可以上传多张图片等。 3. 编写后端处理程序 在上传图片的处理程序中,我们一般需要在程序中编写以下基本功能: ① 判断上传的文件是否合法,包括文件类型是否允许上传、文件大小是否在规定范围内等。 ② 将上传图片保存到指定文件夹中。 ③ 返回上传结果,一般是返回上传图片地址或者上传失败的原因等。 4. 使用 在前端页面中,我们可以通过点击上传图片按钮来触发上传图片的功能。在点击上传图片按钮后,会弹出选择图片的对话框,我们可以选择多张图片,然后分别进行上传上传完成后,可以在编辑器中看到上传图片。 总的来说,kindeditor上传多张图片的功能非常实用,可以让我们的文章或网站更加丰富和有趣。同时,对于后端开发人员来说,也需要注意上传图片的文件类型和大小等问题,以确保上传图片的安全性和稳定性。 ### 回答3: KindEditor是一款基于jQuery和Zlib的网页富文本编辑器,它支持表格、混合开发、超过40种已配置的插件、代码自动提示与补全。在KindEditor中,用户可以方便地插入各类多媒体元素,包括图片、音视频等。也就是说,在KindEditor上传多张图片非常容易。 具体的上传过程可以分为以下几个步骤: 1. 在前端页面中添加一个文件上传控件,例如: <input type="file" id="file" name="file" multiple/> 其中,multiple属性表示可以选择多个文件进行上传。 2. 在JavaScript中添加上传代码。使用KindEditor自带的uploadJson接口可以实现多张图片上传KindEditor.ready(function(K) { var editor = K.editor({ // 设置上传接口 uploadJson: '/upload_json.php', fileManagerJson: '/file_manager_json.php' }); K('#upload_img_btn').click(function() { editor.loadPlugin('multiimage', function() { // 打开上传多张图片的窗口 editor.plugin.multiImageDialog({ clickFn: function(data) { // 上传成功后执行的回调函数 } }); }); }); }); 在上述代码中,uploadJson属性设置上传接口,multiImageDialog方法打开多张图片上传的窗口。 3. 在服务器端编写PHP代码处理上传请求。具体的实现方式因不同的后端语言而异,在PHP中,可以使用$_FILE数组来处理上传文件。例如: if(!empty($_FILES['file']['name'])) { $fileArr = $_FILES['file']; for($i=0; $i<count($fileArr['name']); $i++) { $tmp_name = $fileArr['tmp_name'][$i]; $name = $fileArr['name'][$i]; // 保存文件到指定目录 move_uploaded_file($tmp_name, 'uploads/'.$name); $urlArr[] = 'uploads/'.$name; } echo json_encode(array('error' => 0, 'data' => $urlArr)); } 其中,$fileArr为上传的文件数组,$urlArr保存上传成功后每个文件的URL地址。 综上所述,KindEditor编辑器上传多张图片的步骤包括前端文件上传控件的添加、JavaScript上传代码的编写以及后端服务器代码的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值