用layui 模板，数据表格展示图片,

1.1 layui数据表格展示图片的基础使用

js

<script>
layui.use(['tree', 'util','upload','table'], function(){var upload = layui.upload;var tree = layui.tree,layer = layui.layer,util = layui.util,table = layui.table;//第一个实例table.render({elem: '#demo',height: 312,url: '${ctxPath}/upc/json' //数据接口,page: true //开启分页,cols: [[ //表头{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},{field: 'url', title: '图片', width: 135,templet:"#imgtemp"}]]});//普通图片上传var uploadInst = upload.render({elem: '#test1',url: '${ctxPath}/upc/upload',before: function(obj){//预读本地文件示例，不支持ie8obj.preview(function(index, file, result){$('#demo1').attr('src', result); //图片链接（base64）});},done: function(res){//如果上传失败if(res.code > 0){return layer.msg('上传失败');}else{console.log("success");}//上传成功},error: function(){//演示失败状态，并实现重传var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function(){uploadInst.upload();});}});});
</script><!-- 定义图像模板 d为filed中的返回参数,url为后台中每一组元素的url --><script type="text/html" id="imgtemp"><div><img src="{{d.url}}" style="width:20px;height:20px"></div>
</script><table id="demo" lay-filter="tdemo"></table>

html

<div class="layui-upload"><button type="button" class="layui-btn" id="test1">上传图片</button><div class="layui-upload-list"><img class="layui-upload-img" style="width:100px;height:100px" id="demo1"><p id="demoText"></p></div>
</div>

后台controller

  /*** 上传用户头像，并保存* @param request* @return* @throws Exception*/@ResponseBody@RequestMapping(value="upload",method=RequestMethod.POST)public Map<String,Object> upString(HttpServletRequest request) throws Exception{System.out.println("up");Map<String,Object> resultMap=new LinkedHashMap<String, Object>();Map<String,Object> Map=new LinkedHashMap<String, Object>();List<Map<String,Object>> listMap = new ArrayList<Map<String,Object>>();MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();//文件集合
//          if(!file.isEmpty()){//上传文件路径//String path=request.getSession().getServletContext().getRealPath("/imag");//F:\eclipse\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\wood\imag\dayuan.jpg//山传到相对路径String path ="F:/eclipse/dayuan/imag";System.err.println(path);// 检查目录File uploadDir = new File(path);if (!uploadDir.isDirectory()) {// 如果不存在，创建文件夹if (!uploadDir.exists()) {uploadDir.mkdirs();}}for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {SimpleDateFormat df2 = new SimpleDateFormat("yyyyMMddHHmmss");String date=df2.format(new Date());System.err.println(date+"当前时间");MultipartFile file2=entity.getValue();String filename=file2.getOriginalFilename();File filepath=new File(path,filename);//判断路径是否存在，如果不存在就创建一个if(!filepath.getParentFile().exists()){filepath.getParentFile().mkdirs();}//重命名// 扩展名String fileExt = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();//扩展名Date date2=df2.parse(date);//新的文件名String newFileName=date+"_"+new Random().nextInt(100)+"."+fileExt;System.err.println("新文件名："+newFileName);//保存的路径String Savepath="/imag/"+newFileName;System.out.println("存储路径"+Savepath);//保存图片数据//将上传的文件保存到目标文件中file2.transferTo(new File(path+File.separator+newFileName));//图片urlString url = "/upload/"+newFileName;System.out.println(path+File.separator+filename);//保存图片Userimage image = new Userimage();image.setId(1L);image.setUrl(url);imgService.insert(image);resultMap.put("code",0);resultMap.put("msg","");resultMap.put("count", 10);Map.put("src",url);listMap.add(Map);resultMap.put("data",listMap);}return resultMap;}@ResponseBody@RequestMapping("json")public String toJson(Integer page,Integer limit){Map<String,Object> resultMap=new LinkedHashMap<String, Object>();Map<String,Object> Map=new LinkedHashMap<String, Object>();List<Map<String,Object>> listMap = new ArrayList<Map<String,Object>>();Page<Userimage> page2 ;EntityWrapper<Userimage> wrapper = new EntityWrapper<>();wrapper.orderBy("id ASC");if(page==0||limit==0){page2 = getPage();}else {//换页page2 = new Page(page,limit);}Page<Userimage> pageUser = imgService.selectPage(page2,wrapper);String jsonR=Json.encode(Response.dt(pageUser));return jsonR;}

2.关于web项目访问本地磁盘图片文件

当我在页面中访问本地磁盘中文件时遇到了问题，网上大多说在web.xml中标签内添加配置，但亲测失败，我要访问的本地文件还是被浏览器阻碍
后用如下方案，实现

双击服务器，打开服务器配置，点击module，在内添加web module需要的虚拟路径,/upload即是要匹配的路径，Document Base是我们存储的本地路径, 在页面上访问磁盘即 http://localhost:8080/upload +你存储文件夹内的图片文件全称.

3.效果图

用layui 模板，数据表格展示图片,相关推荐

将图片显示到layui的数据表格上
要实现的效果图其实要实现上面这个将图片显示到layui的数据表格上,其实很简单. 利用的是layui数据表格里面的templet - 自定义列模板. 一开在表格渲染那里定义一个自定义列. 然后给他写 ...
【layui】Layui实现数据表格中鼠标悬浮图片放大效果
Layui实现数据表格中鼠标悬浮图片放大效果前端代码: var url = baseUrl + "/api/SysUser/GetSysUsers";table.render({ ...
layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索在 reload:function () { var keyWord=$("#keyWord").v ...
使用layui做数据表格使用下拉菜单并实现删除功能和时间选择器
一.再layui官网上查看数据表格的使用方式查看代码实例不使用 toolbar工具栏,分页功能之类的就不在创建渲染实例的声明二.根据你要完成表格设计稿完成数据表格中使用下拉菜单和时间选择器以图 ...
【Layui】数据表格（与后台交互获取数据）
html <table id="userList" lay-filter="userList"></table> js //用户列表 v ...
bootstraptable导出excel独立使用_使用 EasyPOI 优雅导出Excel模板数据（含图片）
EasyPOI功能如同名字Easy,主打的功能就是容易,让一个没接触过POI的人员可以方便的写出Excel导出,Excel模板导出,Excel导入,Word模板导出.通过简单的注解和模板语言(熟悉的表 ...
使用EasyPOI导出Excel模板数据（含图片）
使用EasyPOI导出Excel模板数据(含图片) EasyPOI功能如同名字Easy,主打的功能就是容易,让一个没接触过POI的人员可以方便的写出Excel导出,Excel模板导出,Excel导入, ...
layui table数据表格中数据返回成功，但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
layui框架数据表格的批量删除
layui框架数据表格的批量删除操作此文献为layui框架的数据表格的批量删除,批量删除顾名思义就是把大量的数据进行删除操作由于有点项目数据繁多,如果在要删除的时候一个一个的删除的话,就会很麻烦. ...

用layui 模板，数据表格展示图片,

1.1 layui数据表格展示图片的基础使用

js

html

后台controller

2.关于web项目访问本地磁盘图片文件

3.效果图

用layui 模板，数据表格展示图片,相关推荐

最新文章

热门文章

用layui 模板，数据表格展示 图片,

1.1 layui数据表格展示图片的基础使用

js

html

后台controller

2.关于web项目访问本地磁盘图片文件

3.效果图

用layui 模板，数据表格展示 图片,相关推荐

最新文章

热门文章

用layui 模板，数据表格展示图片,

用layui 模板，数据表格展示图片,相关推荐