1、页面代码布局

<div class="layui-col-xs12 form-group"><div class="layui-col-xs6"><div class="layui-col-xs3"><label>标题</label></div><div class="layui-col-xs7"><input type="text" name="title" id="title" required lay-verify="required"placeholder="请输入图片标题"autocomplete="off" class="layui-input"><input type="hidden" name="id"></div></div></div>

2、点击放大设置

var renderImg = function () {form.render();layer.photos({photos: '.theImg', anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
            });}

3、上传成功之后,回显

//图片上传
        upload.render({elem: '#uploadImg', url: "commonCtrl/receiptUpload" //必填项, method: ''  //可选项。HTTP类型,默认post, accept: 'images', acceptMime: 'image/*', data: {flag: "rotationChart"} //可选项。额外的参数,如:{id: 123, abc: 'xxx'}, before: function (obj) { //obj参数包含的信息,跟 choose回调完全一致,可参见上文。//预读本地文件示例,不支持ie8
            },done: function(res){//如果上传失败if(!res.success){return layer.alert('上传失败');}//上传成功var img = '<img layer-pid="rotationChartDiv" alt=""  layer-src="' + res.data.url + '" src="' +res.data.url + '" style="max-width: 100%;max-height: 100%;">';$("#rotationChartDiv").html(img);$("#url").val(res.data.url);//点击放大          renderImg();},error: function(){layer.msg("上传失败");}});

end:补上上传接口实现代码

controller层

 @RequestMapping(value = "/receiptUpload", method = RequestMethod.POST)@ResponseBodypublic YJLResponseModel receiptUpload(@RequestParam("file") MultipartFile img, @RequestParam String flag) {return UploadUtil.fileUploadServices(img, flag);}

service层:

public static Map fileUploadServices(MultipartFile file,String flag) {Map<String, String> result = new HashMap<>();String name = file.getOriginalFilename();String suffixName = "";/** MultipartFile转File*/File f = null;try {if (!name.contains(".")) {errorMsg = "文件不能为空!";throw new Exception(getErrorMsg());} else {suffixName = name.substring(name.indexOf("."));f = File.createTempFile("tmp", null);//通过MultipartFile的transferTo(File dest)这个方法来转存文件到指定的路径。MultipartFile转存后,无法再操作,会报错
                file.transferTo(f);//在JVM进程退出的时候删除文件,通常用在临时文件的删除.
                f.deleteOnExit();/** File转byte*/byte[] buffer = null;if (f != null) {FileInputStream fis = new FileInputStream(f);ByteArrayOutputStream bos = new ByteArrayOutputStream();byte[] b = new byte[1024];int n;while ((n = fis.read(b)) != -1) {bos.write(b, 0, n);}fis.close();bos.close();buffer = bos.toByteArray();/**  byte上传到webService*/UploadService myServiceImplService = new UploadService();UploadServiceSoap msis = myServiceImplService.getUploadServiceSoap();//是否上传成功Holder<Boolean> hb = new Holder<>();//上传成功后文件的路径Holder<String> hs = new Holder<>();msis.uploadFile(buffer, flag, suffixName, hb, hs);if (hb.value) {setSuccess(true);Map<String, String> map = new HashMap<>();map.put("url", hs.value);result.put("data",map);} else {errorMsg = "上传失败!";}} else {errorMsg = "文件不能为空!";throw new Exception(getErrorMsg());}}} catch (Exception e) {e.printStackTrace();logger.error(e.getMessage());} finally{result.put("msg",errorMsg);}return result;}

转载于:https://www.cnblogs.com/yangyuke1994/p/10194195.html

layui 上传图片回显并点击放大实现相关推荐

  1. Vue+element ui上传图片和视频并回显,点击放大查看和播放

    1.上传图片 html代码: <el-uploadaction="#":auto-upload="false":on-change="handl ...

  2. WebUploader 上传图片回显

    /* fileMaxCount 最大文件数 buttonText 按钮文本 multiple 是否多选 */ (function ($) {$.fn.extend({uploadImg: functi ...

  3. java上传图片回显_【java】批量上传图片并回显功能

    一.前言 在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能.可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到. ...

  4. Simditor 上传图片回显图片src base64 换成 图片链接

    Simditor 是一款简介好用的富文本插件 使用过程中发现 添加图片后,后台报错说字段太长,无法存入内容 原因是:Simditor 没有找到上传图片后回显的图片地址,直接获取图片的源文件转成base ...

  5. 前端上传图片回显并用base64编码,后端做解码储存,存储图片路径在.properties文件中配置(以上传身份证照片为例)

    前端页面: <form id="kycForm" enctype="multipart/form-data"> <input type=&qu ...

  6. 上传图片回显(上传到服务器)

    No.1 :首先,在pom文件中导入依赖: <!--文件上传 --><dependency><groupId>commons-fileupload</grou ...

  7. layui radio 回显

    $("input[name='isAlive'][value='1']").prop('checked','checked'); 然后 form.render('radio');

  8. SpringBoot 2.0 多图片上传加回显

    点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 本文来源:http://r6f.cn/crEY 这两天公司 ...

  9. Spring Boot 实现多图片上传并回显,涨姿势了~

    上传 Controller的代码非常简单,由于用了SpringMVC框架,所以直接用MultipartFile来接即可.由于是多图片上传所以用数组来接.此处应该注意参数名应该和<input> ...

  10. Spring Boot 2.0 多图片上传加回显

    点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源:http://r6f.cn/crEY 这两天公司有 ...

最新文章

  1. 《Python编程从入门到实践》学习笔记3:列表
  2. [zz]正则表达式使用详解
  3. css中使用id和class 的不同
  4. 【MM 模块】 Optimized Purchasing 优化采购 1
  5. 记录一次withRouter的实际应用场景
  6. 柳传志给年轻人的建议:比起过日子,更要奔日子
  7. 数论 —— 最大公约数与最小公倍数
  8. ~~队列(数据结构)(附模板题 AcWing 829. 模拟队列)
  9. eligius矿池设置
  10. Scrum Meeting博客目录
  11. [C/C++]_[0基础]_[static_cast,reinterpret_cast,dynimic_cast的使用场景和差别]
  12. 批量获取/打开链接 - 实践
  13. 使用萤石云的出现设备不在线问题的解决方法
  14. C/C++ abs 函数 - C语言零基础入门教程
  15. 计算机专业读研好还是研究生好,计算机专业考研好呢还是直接工作好
  16. pyautogui图形识别-confidence,grayscale
  17. Dex.top新手使用教程
  18. 2020年IT行业薪资报告
  19. visio2013-软件UML序列图02
  20. 【欧拉降幂公式】【欧拉函数】

热门文章

  1. 【大数据部落】WEKA文本挖掘分析垃圾邮件分类模型
  2. spring教程笔记5
  3. 顺序查找、折半查找、索引查找
  4. rdbms mysql_不同RDBMS下Join 用法 - MySQL
  5. 图卷积网络详细介绍(一)
  6. 为什么是GCN(转)
  7. caffe上手:mnist学习
  8. Ubuntu下安装-有道词典
  9. Shell总结(整理)
  10. 求C语言中的32个关键字及其意思?