layui图片上传及回响

最新推荐文章于 2024-12-27 22:39:53 发布

文昶清

最新推荐文章于 2024-12-27 22:39:53 发布

阅读量553

点赞数

文章标签： layui java

本文链接：https://blog.csdn.net/lchenjiwen/article/details/100034063

版权

该博客主要讨论了在layui富文本编辑器中遇到的图片显示过大问题。通过分析layedit.js文件，找到并修改margin字段的CSS代码来解决图片尺寸问题。同时，提供了jsp、js和java页面的相关代码示例，展示了如何实现图片上传和回响功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsp页面：

	<textarea class="layui-textarea layui-hide policy_content" placeholder="请输入资质范围" name="policy_content" lay-verify="content" id="policy_content"></textarea>

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<String,Object> 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<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);//图片名称，这个会显示在输入框里
		return map;

    }

效果图：
在这里插入图片描述