关键词：
一：html 原生态的附件上传
二：实现逻辑分析；
1.1.1 需求分析
Common.js
1、绑定事件
2、初始化参数
3、上传图片的url：
/pic/upload
4、上图片参数名称：
uploadFile
5、返回结果数据类型json
参考文档：
http://kindeditor.net/docs/upload.html
返回格式(JSON)
1 //成功时 2 3 { 4 5 "error" : 0, 6 7 "url" : "http://www.example.com/path/to/file.ext" 8 9 } 10 11 //失败时 12 13 { 14 15 "error" : 1, 16 17 "message" : "错误信息" 18 19 } 20
6 Service
7: Controller
8:需要引入的jar包的maven 配置参数：
1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 2 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> 3 4 <artifactId>taotao-common</artifactId> 5 <!-- jar包依赖 --> 6 <dependencies> 7 <!-- 时间操作组件 --> 8 <dependency> 9 <groupId>joda-time</groupId> 10 <artifactId>joda-time</artifactId> 11 </dependency> 12 <!-- Apache工具组件 --> 13 14 <dependency> 15 <groupId>org.apache.commons</groupId> 16 <artifactId>commons-io</artifactId> 17 </dependency> 18 <dependency> 19 <groupId>commons-net</groupId> 20 <artifactId>commons-net</artifactId> 21 </dependency> 22 <!-- Jackson Json处理工具包 --> 23 <dependency> 24 <groupId>com.fasterxml.jackson.core</groupId> 25 <artifactId>jackson-databind</artifactId> 26 </dependency> 27 <!-- 文件上传组件 --> 28 <dependency> 29 <groupId>commons-fileupload</groupId> 30 <artifactId>commons-fileupload</artifactId> 31 </dependency> 32 33 </dependencies> 34 35 36 </project>
三：逻辑实现：
1：前端实现：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet"> 3 <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script> 4 <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script> 5 <div style="padding:10px 10px 10px 10px"> 6 <form id="itemAddForm" class="itemForm" method="post"> 7 <table cellpadding="5"> 8 <tr> 9 <td>商品类目:</td> 10 <td> 11 <a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a> 12 <input type="hidden" name="cid" style="width: 280px;"></input> 13 </td> 14 </tr> 15 <tr> 16 <td>商品标题:</td> 17 <td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td> 18 </tr> 19 <tr> 20 <td>商品卖点:</td> 21 <td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td> 22 </tr> 23 <tr> 24 <td>商品价格:</td> 25 <td><input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" /> 26 <input type="hidden" name="price"/> 27 </td> 28 </tr> 29 <tr> 30 <td>库存数量:</td> 31 <td><input class="easyui-numberbox" type="text" name="num" data-options="min:1,max:99999999,precision:0,required:true" /></td> 32 </tr> 33 <tr> 34 <td>条形码:</td> 35 <td> 36 <input class="easyui-textbox" type="text" name="barcode" data-options="validType:'length[1,30]'" /> 37 </td> 38 </tr> 39 <tr> 40 <td>商品图片:</td> 41 <td> 42 <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a> 43 <input type="hidden" name="image"/> 44 </td> 45 </tr> 46 <tr> 47 <td>商品描述:</td> 48 <td> 49 <textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea> 50 </td> 51 </tr> 52 <tr class="params hide"> 53 <td>商品规格:</td> 54 <td> 55 56 </td> 57 </tr> 58 </table> 59 <input type="hidden" name="itemParams"/> 60 </form> 61 <div style="padding:5px"> 62 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a> 63 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a> 64 </div> 65 </div> 66 <script type="text/javascript"> 67 var itemAddEditor ; 68 //页面初始化完毕后执行此方法 69 $(function(){ 70 //创建富文本编辑器 71 itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]"); 72 //初始化类目选择和图片上传器 73 TAOTAO.init({fun:function(node){ 74 //根据商品的分类id取商品 的规格模板，生成规格信息。第四天内容。 75 //TAOTAO.changeItemParam(node, "itemAddForm"); 76 }}); 77 }); 78 //提交表单 79 function submitForm(){ 80 //有效性验证 81 if(!$('#itemAddForm').form('validate')){ 82 $.messager.alert('提示','表单还未填写完成!'); 83 return ; 84 } 85 //取商品价格，单位为“分” 86 $("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100); 87 //同步文本框中的商品描述 88 itemAddEditor.sync(); 89 //取商品的规格 90 /* 91 var paramJson = []; 92 $("#itemAddForm .params li").each(function(i,e){ 93 var trs = $(e).find("tr"); 94 var group = trs.eq(0).text(); 95 var ps = []; 96 for(var i = 1;i<trs.length;i++){ 97 var tr = trs.eq(i); 98 ps.push({ 99 "k" : $.trim(tr.find("td").eq(0).find("span").text()), 100 "v" : $.trim(tr.find("input").val()) 101 }); 102 } 103 paramJson.push({ 104 "group" : group, 105 "params": ps 106 }); 107 }); 108 //把json对象转换成字符串 109 paramJson = JSON.stringify(paramJson); 110 $("#itemAddForm [name=itemParams]").val(paramJson); 111 */ 112 //ajax的post方式提交表单 113 //$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串 114 $.post("/item/save",$("#itemAddForm").serialize(), function(data){ 115 if(data.status == 200){ 116 $.messager.alert('提示','新增商品成功!'); 117 } 118 }); 119 } 120 121 function clearForm(){ 122 $('#itemAddForm').form('reset'); 123 itemAddEditor.html(''); 124 } 125 </script> 126
commom.js
1 Date.prototype.format = function(format){ 2 var o = { 3 "M+" : this.getMonth()+1, //month 4 "d+" : this.getDate(), //day 5 "h+" : this.getHours(), //hour 6 "m+" : this.getMinutes(), //minute 7 "s+" : this.getSeconds(), //second 8 "q+" : Math.floor((this.getMonth()+3)/3), //quarter 9 "S" : this.getMilliseconds() //millisecond 10 }; 11 if(/(y+)/.test(format)){ 12 format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 13 } 14 for(var k in o) { 15 if(new RegExp("("+ k +")").test(format)){ 16 format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); 17 } 18 } 19 return format; 20 }; 21 22 var TT = TAOTAO = { 23 // 编辑器参数 24 kingEditorParams : { 25 //指定上传文件参数名称 26 filePostName : "uploadFile", 27 //指定上传文件请求的url。 28 uploadJson : '/pic/upload', 29 //上传类型，分别为image、flash、media、file 30 dir : "image" 31 }, 32 // 格式化时间 33 formatDateTime : function(val,row){ 34 var now = new Date(val); 35 return now.format("yyyy-MM-dd hh:mm:ss"); 36 }, 37 // 格式化连接 38 formatUrl : function(val,row){ 39 if(val){ 40 return "<a href='"+val+"' target='_blank'>查看</a>"; 41 } 42 return ""; 43 }, 44 // 格式化价格 45 formatPrice : function(val,row){ 46 return (val/1000).toFixed(2); 47 }, 48 // 格式化商品的状态 49 formatItemStatus : function formatStatus(val,row){ 50 if (val == 1){ 51 return '正常'; 52 } else if(val == 2){ 53 return '<span style="color:red;">下架</span>'; 54 } else { 55 return '未知'; 56 } 57 }, 58 59 init : function(data){ 60 // 初始化图片上传组件 61 this.initPicUpload(data); 62 // 初始化选择类目组件 63 this.initItemCat(data); 64 }, 65 // 初始化图片上传组件 66 initPicUpload : function(data){ 67 $(".picFileUpload").each(function(i,e){ 68 var _ele = $(e); 69 _ele.siblings("div.pics").remove(); 70 _ele.after('\ 71 <div class="pics">\ 72 <ul></ul>\ 73 </div>'); 74 // 回显图片 75 if(data && data.pics){ 76 var imgs = data.pics.split(","); 77 for(var i in imgs){ 78 if($.trim(imgs[i]).length > 0){ 79 _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>"); 80 } 81 } 82 } 83 //给“上传图片按钮”绑定click事件 84 $(e).click(function(){ 85 var form = $(this).parentsUntil("form").parent("form"); 86 //打开图片上传窗口 87 KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){ 88 var editor = this; 89 editor.plugin.multiImageDialog({ 90 clickFn : function(urlList) { 91 var imgArray = []; 92 KindEditor.each(urlList, function(i, data) { 93 imgArray.push(data.url); 94 form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>"); 95 }); 96 form.find("[name=image]").val(imgArray.join(",")); 97 editor.hideDialog(); 98 } 99 }); 100 }); 101 }); 102 }); 103 }, 104 105 // 初始化选择类目组件 106 initItemCat : function(data){ 107 $(".selectItemCat").each(function(i,e){ 108 var _ele = $(e); 109 if(data && data.cid){ 110 _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>"); 111 }else{ 112 _ele.after("<span style='margin-left:10px;'></span>"); 113 } 114 _ele.unbind('click').click(function(){ 115 $("<div>").css({padding:"5px"}).html("<ul>") 116 .window({ 117 width:'500', 118 height:"450", 119 modal:true, 120 closed:true, 121 iconCls:'icon-save', 122 title:'选择类目', 123 onOpen : function(){ 124 var _win = this; 125 $("ul",_win).tree({ 126 url:'/item/cat/list', 127 animate:true, 128 onClick : function(node){ 129 if($(this).tree("isLeaf",node.target)){ 130 // 填写到cid中 131 _ele.parent().find("[name=cid]").val(node.id); 132 _ele.next().text(node.text).attr("cid",node.id); 133 $(_win).window('close'); 134 if(data && data.fun){ 135 data.fun.call(this,node); 136 } 137 } 138 } 139 }); 140 }, 141 onClose : function(){ 142 $(this).window("destroy"); 143 } 144 }).window('open'); 145 }); 146 }); 147 }, 148 149 createEditor : function(select){ 150 return KindEditor.create(select, TT.kingEditorParams); 151 }, 152 153 /** 154 * 创建一个窗口，关闭窗口后销毁该窗口对象。<br/> 155 * 156 * 默认：<br/> 157 * width : 80% <br/> 158 * height : 80% <br/> 159 * title : (空字符串) <br/> 160 * 161 * 参数：<br/> 162 * width : <br/> 163 * height : <br/> 164 * title : <br/> 165 * url : 必填参数 <br/> 166 * onLoad : function 加载完窗口内容后执行<br/> 167 * 168 * 169 */ 170 createWindow : function(params){ 171 $("<div>").css({padding:"5px"}).window({ 172 width : params.width?params.width:"80%", 173 height : params.height?params.height:"80%", 174 modal:true, 175 title : params.title?params.title:"", 176 href : params.url, 177 onClose : function(){ 178 $(this).window("destroy"); 179 }, 180 onLoad : function(){ 181 if(params.onLoad){ 182 params.onLoad.call(this); 183 } 184 } 185 }).window("open"); 186 }, 187 188 closeCurrentWindow : function(){ 189 $(".panel-tool-close").click(); 190 }, 191 192 changeItemParam : function(node,formId){ 193 $.getJSON("/item/param/query/itemcatid/" + node.id,function(data){ 194 if(data.status == 200 && data.data){ 195 $("#"+formId+" .params").show(); 196 var paramData = JSON.parse(data.data.paramData); 197 var html = "<ul>"; 198 for(var i in paramData){ 199 var pd = paramData[i]; 200 html+="<li><table>"; 201 html+="<tr><td colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>"; 202 203 for(var j in pd.params){ 204 var ps = pd.params[j]; 205 html+="<tr><td class=\"param\"><span>"+ps+"</span>: </td><td><input autocomplete=\"off\" type=\"text\"/></td></tr>"; 206 } 207 208 html+="</li></table>"; 209 } 210 html+= "</ul>"; 211 $("#"+formId+" .params td").eq(1).html(html); 212 }else{ 213 $("#"+formId+" .params").hide(); 214 $("#"+formId+" .params td").eq(1).empty(); 215 } 216 }); 217 }, 218 getSelectionsIds : function (select){ 219 var list = $(select); 220 var sels = list.datagrid("getSelections"); 221 var ids = []; 222 for(var i in sels){ 223 ids.push(sels[i].id); 224 } 225 ids = ids.join(","); 226 return ids; 227 }, 228 229 /** 230 * 初始化单图片上传组件 <br/> 231 * 选择器为：.onePicUpload <br/> 232 * 上传完成后会设置input内容以及在input后面追加<img> 233 */ 234 initOnePicUpload : function(){ 235 $(".onePicUpload").click(function(){ 236 var _self = $(this); 237 KindEditor.editor(TT.kingEditorParams).loadPlugin('image', function() { 238 this.plugin.imageDialog({ 239 showRemote : false, 240 clickFn : function(url, title, width, height, border, align) { 241 var input = _self.siblings("input"); 242 input.parent().find("img").remove(); 243 input.val(url); 244 input.after("<a href='"+url+"' target='_blank'><img src='"+url+"' width='80' height='50'/></a>"); 245 this.hideDialog(); 246 } 247 }); 248 }); 249 }); 250 } 251 }; 252
2：后台的逻辑实现
2-1： ftp配置文件
1 FTP_ADDRESS=192.168.1.5 2 FTP_PORT=21 3 FTP_USERNAME=ftpuser 4 FTP_PASSWORD=123456 5 FTP_BASEPATH=/home/ftpuser/www/images/ 6 IMAGE_BASE_URL=http://192.168.1.5/images/ 7
引入到SpringMVC.xml配置文件中
2-2：SpringMvc.xml的实现配置
1 2 <!-- 定义文件上传解析器 --> 3 <bean id="multipartResolver" 4 class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> 5 <!-- 设定默认编码 --> 6 <property name="defaultEncoding" value="UTF-8"></property> 7 <!-- 设定文件上传的最大值5MB，5*1024*1024 --> 8 <property name="maxUploadSize" value="5242880"></property> 9 </bean> 10 11
2-3：controller层实现：
1 package com.taotao.controller; 2 3 import java.util.Map; 4 5 import org.springframework.beans.factory.annotation.Autowired; 6 import org.springframework.stereotype.Controller; 7 import org.springframework.web.bind.annotation.RequestMapping; 8 import org.springframework.web.bind.annotation.ResponseBody; 9 import org.springframework.web.multipart.MultipartFile; 10 11 import com.taotao.common.utils.JsonUtils; 12 import com.taotao.service.PictureService; 13 14 /** 15 * 16 * @ClassName: PictureController 17 * @Description:上传图片处理 18 * @author: 刘军/shall_liu(1136808529@qq.com) 19 * @date: 2017年8月26日 下午4:03:42 20 * 21 * @Copyright: 2017 22 */ 23 @Controller 24 public class PictureController { 25 26 @Autowired 27 private PictureService pictureService; 查看详情怎么在jsp页面的form表单中加入富文本编辑器？？？并传递数据到后台进行保存
如题。用的ueditor富文本编辑器参考技术A一般都是引入富文本的框架，框架会给你处理好。 参考技术B富文本编辑器框架有封装过的方法,你只需要看他的api进行掉调用即可,参看百度ueditor 查看详情
百度富文本框ueditor(代码片段)
...项目lib中。 因为在WEB-INF不可以直接访问，所以要在springmvc.xml中配置资源映射<!--静态资源映射,可以配置多个--><mvc:resourcesmapping="/plugin/**"location="/WEB-INF/plugin/"/><mvc:default-servlet-handler/>页面中使用<%--引入百度uedi... 查看详情
jsp页面中使用jquery，展示一段从数据库读取的富文本展示，怎么写这个。
...一个配置化流程实现，发起的界面根据用户自己配置的富文本展示；用户设计自己的发起界面模板，形成富文本保存在数据库中，当打开发起交易时，根据用户选择的模板，加载对应的界面，之后数据提交后台。后台java实现。jq... 查看详情
富文本编辑器
创建moneyTest页面，提交地址是result.jsp<scripttype="text/javascript"src="ckeditor/ckeditor.js"></script></head><body><formaction="<%=path%>/result.jsp"method="post"><texta 查看详情
富文本编辑器
首先，下载CKEditor源码。到CKEditor官网进行下载。然后将下载的文件进行解压。 打开解压后的文件，将ckeditorWebContentckeditor 目录下的文件复制到工程目录新建一个JSP页面编写代码：<formaction="<%=path%>/result.jsp... 查看详情
springboot整合百度ueditor富文本
百度的富文本没有提供Java版本的,只给提供了jsp版本,但是呢springboot如果是使用内置tomcat启动的话整合jsp是非常困难得,今天小编给大家带来springboot整合百度富文本需要做哪些 1.先将百度提供的demo和js导入项目中 2.编... 查看详情
文件上传功能+富文本页面！！！！！！！！！！！！！！！！
一：文件上传功能1：首先在index.jsp的界面上初始化一个表单。<body><formenctype="multipart/form-data"action="<%=path%>/1.jsp"method="post">姓名：<inputtype="text"name="username"/>选择文件：<inputtype="file"na 查看详情
文件上传and富文本页面
文件上传功能：1。首先在index.jsp的界面上初始化一个表单。 <body><formenctype="multipart/form-data"action="<%=path%>/1.jsp"method="post">姓名：<inputtype="text"name="username"/>选择文件：<inputty 查看详情
ueditor之——与springmvc整合
...8月的最后一天，那么就给大家带来一篇关于JSPUEditor整合SpringMVC的文章吧，UEditor是百度的一款富文本编辑器产品，网址为：http://ueditor.baidu.com/we 查看详情
富文本编辑器
根据需要下载富文本编辑器安装包网址：ckeditor.com，其次将ckeditor文件夹导入WebRoot根目录下创建moneyTest页面，提交地址是result.jsp<scripttype="text/javascript"src="ckeditor/ckeditor.js"></script></head><body><formact 查看详情
富文本编辑器
根据需要下载富文本编辑器安装包网址：ckeditor.com，其次将ckeditor文件夹导入WebRoot根目录下创建moneyTest页面，提交地址是result.jsp<scripttype="text/javascript"src="ckeditor/ckeditor.js"></script></head><body><formact 查看详情
富文本前台接收方法实例
<%@pagelanguage="java"contentType="text/html;charset=utf-8"pageEncoding="utf-8"%><%@includefile="../common/common.jsp"%><html><head><metahttp-equiv="Content-Type"content="te 查看详情
富文本编辑器ueditor的配置使用方法
将下载的富文本编辑器的文件解压后放到webcontent下如果文件中的jsp文件夹下的controller.java文件报错的话 就将jsp下的lib文件夹中的文件都复制到 web-inf文件夹下的lib中，就可以解决报错的问题了按理说还需要修改config.... 查看详情
百度富文本ueditor编辑器的使用(代码片段)
...，尤其是在网站开发后台管理系统的时候经常会使用到富文本编辑器，这里我们来使用百度提供的富文本编辑器UEditor，以提高我们的开发效率UEditor官网下载地址：https://ueditor.baidu.com/website/download.html 这里我下载的是jsp版本... 查看详情
富文本编辑器复制粘贴word
...编码解码）因为公司业务需要支持IE8，网上其实有很多富文本框，效果都很好。例如www.wangEditor.com 但试了一圈都不支持IE8。所以回到Ueditor，由于官方没有维护，新的n 查看详情
项目小结:百度富文本的使用java版和oracle批量新增的坑
1、【java版】百度富文本的使用的问题 百度富文本api:http://fex.baidu.com/ueditor/UEditor文档: http://fex.baidu.com/ueditor/项目结构:这里不提基础的配置，只能对比jsp和html配置的不同 首先，在ueditor.config.js... 查看详情
springmvc使用jsp:include嵌入页面的两种方式
1、静态嵌入子页面 <%@includefile="header.jsp"%> 静态嵌入支持jsp、html、xml以及纯文本。 静态嵌入在编译时完成，相当于直接将子页面的文本插入到include标签所在的位置。子页面可直接使用父页面中的变量... 查看详情