layui图片上传及回响

jsp页面:

	 

js页面:

layui.use(['layedit','upload','form','layer'], function(){
	 var table = layui.table,
	  $ = layui.$,
	  upload =layui.upload
	  ,form=layui.form;
  var layedit = layui.layedit;
  
  		$(".lookContent").hide();
       //上传图片,必须放在 创建一个编辑器前面
       layedit.set({
       uploadImage: {
       url: 'fillupf' //接口url
       ,type: 'post' //默认post
            
                   	 }

				});
				
		var index=layedit.build("policy_content",{//创建编辑器
			height:800
		});

java页面:

@ResponseBody
	@RequestMapping(value="/fillupf",method=RequestMethod.POST)
	public Map fillupf(HttpServletRequest request,@RequestParam("file") MultipartFile file) throws IllegalStateException, IOException {
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
		java.util.Date d = new java.util.Date();
		String res = sdf.format(d);
		//服务器上使用
		String ff = request.getSession().getServletContext().getRealPath("upload");		//本地使用
		 File f=new File(ff);
		if(!f.exists())
		{
			try {
				f.createNewFile();
			} catch (IOException e) {
				e.printStackTrace();
									}
		}
		String rootPath =ff+"/imgs";
		 //原文件名称
		 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 = "upload/imgs/"+date.get(Calendar.YEAR)+ "/"+(date.get(Calendar.MONTH)+1)+ "/"
		+newFileName;//以 Map 方式 创建JSON,最终返回给 前台
		System.out.println(fileUrl);
		Map map = new HashMap();
		Map map2 = new HashMap();
		map.put("code",0);//0表示成功,1失败
		map.put("msg","上传成功");//提示消息
		map.put("data",map2);
		map2.put("src",fileUrl);//图片url
		map2.put("title",newFileName);//图片名称,这个会显示在输入框里
		return map;

    }

效果图:
layui图片上传及回响_第1张图片

关于layui富文本编辑器图片显示过大的问题:

在lay文件夹目录中找到layedit.js文件,
layui图片上传及回响_第2张图片

在js里搜索*{margin 字段,会匹配到这样一段css代码:
在这里插入图片描述

如果没有自己添加自己想要的大小:
在这里插入图片描述

你可能感兴趣的:(layui,java)