这里有新鲜出炉的精品教程,程序狗速度看过来!
这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料, 需要的朋友可以参考下
富文本编辑器上传图片
一、导入 kindeditor 的 js
- <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
- <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
二、将 kindeditor 与一个文本域 textarea 进行关联,即用 textarea 初始化一个 kindeditor 对象
- itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
- //初始化类目选择和图片上传器
- TAOTAO.init({fun:function(node){
- TAOTAO.changeItemParam(node, "itemAddForm");
- }});
三、设置要上传的参数
- var TT = TAOTAO = {
- // 编辑器参数
- kingEditorParams: {
- //指定上传文件参数名称
- filePostName: "uploadFile",
- //指定上传文件请求的url。
- uploadJson: '/pic/upload',
- //上传类型,分别为image、flash、media、file
- dir: "image"
- },
- init: function(data) {
- // 初始化图片上传组件
- this.initPicUpload(data);
- // 初始化选择类目组件
- this.initItemCat(data);
- },
- // 初始化图片上传组件
- initPicUpload: function(data) {
- $(".picFileUpload").each(function(i, e) {
- var _ele = $(e);
- _ele.siblings("div.pics").remove();
- _ele.after('\
- <div class="pics">\
- <ul></ul>\
- </div>');
- // 回显图片
- if (data && data.pics) {
- var imgs = data.pics.split(",");
- for (var i in imgs) {
- if ($.trim(imgs[i]).length > 0) {
- _ele.siblings(".pics").find("ul").append("<li><a href='" + imgs[i] + "' target='_blank'><img src='" + imgs[i] + "' width='80' height='50' /></a></li>");
- }
- }
- }
- //给"上传图片按钮"绑定click事件
- $(e).click(function() {
- var form = $(this).parentsUntil("form").parent("form");
- //打开图片上传窗口
- KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',
- function() {
- var editor = this;
- editor.plugin.multiImageDialog({
- clickFn: function(urlList) {
- var imgArray = [];
- KindEditor.each(urlList,
- function(i, data) {
- imgArray.push(data.url);
- form.find(".pics ul").append("<li><a href='" + data.url + "' target='_blank'><img src='" + data.url + "' width='80' height='50' /></a></li>");
- });
- form.find("[name=image]").val(imgArray.join(","));
- editor.hideDialog();
- }
- });
- });
- });
- });
服务端代码
- public Map uploadPicture(MultipartFile uploadFile) {
- Map resultMap = new HashMap < >();
- try {
- //生成一个新的文件名
- //去原始文件名
- String oldName = uploadFile.getOriginalFilename();
- //生成新的文件名
- //UUID.randomUUID();
- String newName = IDUtils.genImageName();
- newName = newName + oldName.substring(oldName.lastIndexOf("."));
- String imagePath = new DateTime().toString("/yyyy/MM/dd");
- //上传图片
- boolean result = FtpUtil.uploadFile(FTP_ADDRESS, FTP_PORT, FTP_USERNAME, FTP_PASSWORD, FTP_BASE_PATH, imagePath, newName, uploadFile.getInputStream());
- System.out.println("result=" + result);
- if (!result) {
- resultMap.put("error", 1);
- resultMap.put("message", "文件上传失败");
- System.out.println("hh");
- return resultMap;
- }
- resultMap.put("error", 0);
- resultMap.put("url", IMAGE_BASE_PATH + imagePath + "/" + newName);
- return resultMap;
- } catch(IOException e) {
- resultMap.put("error", 1);
- resultMap.put("message", "文件上传异常");
- return resultMap;
- }
- }
注意:服务端返回的 json 串的格式 {error: 0|1,message|url} 其中 error 为整型不为字符串,如果写成字符串图片能够正常上传至服务器,但是不能在浏览器中回显。
来源: http://www.phperz.com/article/17/0822/339003.html