springmvc layui 富文本编辑器上传图片及图片不能显示问题

本人第一次使用layui富文本编译器上传图片，在这里把使用过程中遇到的问题总结了一下，分享给大家；有什么问题望各位博友提点一下

一.开发前提：

1.使用spring3,springmvc,前端layui,jdk7,tomcat7;

2.layui 官网：http://www.layui.com/，下载框架；引入js和css

3.如下3个必备的jar包，用于上传图片和 json 数据返回

1>:json-20131018.jar; 2>:commons-fileupload-1.3.1.jar; 3>:commons-io-2.2.jar

二：layui相关代码（js里面有的可以不要，根据自己项目需要增减）：

springmvc layui 富文本编辑器上传图片及图片不能显示问题

还有jquery.min.js

springmvc layui 富文本编辑器上传图片及图片不能显示问题

2.引入核心css和js文件

1>:css

<link rel="stylesheet" href="<%=basePath%>layui/css/layui.css">

2>:js

<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>layui/layui.js"></script>

3.js和jsp里面的代码

1>:js(上传图片的代码必须放在创建一个编辑器前面)

                var $;
                layui.config({
                  base : "js/"
                }).use(['form','layer','jquery','laypage','laydate','element','layedit'],function(){
                  var form = layui.form(),
              layer = parent.layer === undefined ? layui.layer : parent.layer,
              layedit=layui.layedit,
              laypage = layui.laypage,
              element = layui.element,
              laydate = layui.laydate,
              $ = layui.jquery;
              $(".lookContent").hide();
                  //上传图片,必须放在创建一个编辑器前面
                  layedit.set({
          uploadImage: {
        url: 'admin/policy/uploadFile' //接口url
      ,type: 'post' //默认post

          }
      });
    //创建一个富文本编辑框

var index=layedit.build("policy_content");

2>:jsp:

form表单的class需要加上 layui-form

textarea 标签的 name 和 id，要和上面一致（此处：var index=layedit.build("policy_content";)）

</div>

</form>

4、现在就可以看到一个富文本编辑框了

springmvc layui 富文本编辑器上传图片及图片不能显示问题

三、springmvc 实现上传功能

1.加入基本的jar;

2.springmvc.xml 配置文件上传

<bean name="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

<property name="defaultEncoding" value="utf-8" />

<property name="maxUploadSize" value="10485760000" />

<property name="maxInMemorySize" value="40960" />
<property name="resolveLazily" value="true"/>

</bean>

3.新建一个上传文件控制器（Controller 这个方法的路径映射是 /uploadFile 要和我们上面配置js里面的接口 url 一致，否则无法上传）

@Controller

@RequestMapping("/admin/policy")

public class PolicysController {

//上传文件
@ResponseBody
@RequestMapping(value = "/uploadFile", produces = "application/json", method = RequestMethod.POST)
public String uploadFile(HttpServletRequest request,@Param("file") MultipartFile file) throws IOException {
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
java.util.Date d = new java.util.Date();
String res = sdf.format(d);
//服务器上使用
// String rootPath =request.getServletContext().getRealPath("/resource/uploads/");//target的目录
//本地使用
File f=new File("D:/3.18/uploads");
if(!f.exists())
{
try {
f.createNewFile();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
String rootPath ="/3.18/uploads/";
//原文件名称
String originalFilename = file.getOriginalFilename();
//新的文件名称
String newFileName = res+originalFilename.substring(originalFilename.lastIndexOf("."));
//创建年月文件夹
Calendar date = Calendar.getInstance();
File dateDirs = new File(date.get(Calendar.YEAR)
+ File.separator + (date.get(Calendar.MONTH)+1));
//新文件
File newFile = new File(rootPath+File.separator+dateDirs+File.separator+newFileName);
//判断目标文件所在的目录是否存在
if(!newFile.getParentFile().exists()) {
//如果目标文件所在的目录不存在，则创建父目录
newFile.getParentFile().mkdirs();
}
System.out.println(newFile);
//将内存中的数据写入磁盘
file.transferTo(newFile);
//完整的url

String fileUrl = "/uploads/"+date.get(Calendar.YEAR)+ "/"+(date.get(Calendar.MONTH)+1)+ "/"

+newFileName; //以 Map 方式创建JSON，最终返回给前台

Map<String,Object> map = new HashMap<String,Object>();

Map<String,Object> map2 = new HashMap<String,Object>();

map.put("code",0);//0表示成功，1失败

map.put("msg","上传成功");//提示消息
map.put("data",map2);
map2.put("src",fileUrl);//图片url
map2.put("title",newFileName);//图片名称，这个会显示在输入框里
String result = new JSONObject(map).toString();
return result;

}

四.出现问题，图片无法正常显示

springmvc layui 富文本编辑器上传图片及图片不能显示问题