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: //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)
@ResponseBody
public 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[];
int n;
while ((n = fis.read(b)) != -) {
bos.write(b, , 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;
}

layui 上传图片回显并点击放大实现的更多相关文章

  1. WebUploader 上传图片回显

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

  2. Kindeditor上传图片回显不出来

    原因之一: 图片成功上传但是回显不出来,这个时候,要检查返回的图片地址是否加了http://这个玩意,不然会将原来的头加上图片返回地址.

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

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

  4. js实现上传图片回显功能

    用到h5技术 <img id="headimg" src="<%=path%>/resources/images/icon4.png" sty ...

  5. js上传图片回显

    $("#file01").change(function(){ var objUrl = getObjectURL(this.files[0]) ; console.log(&qu ...

  6. Vue -- element-ui el-table 点击tr项页面跳转,返回后缓存回显点击项

    页面跳转反显(点击项,点击table滚动的位置,搜索条件,分页回显) 点击table tr项后,页面跳转到下级页面,返回回显搜索条件.当前页码.并将点击项select选中.滚动条也被记录回显跳转时滚动 ...

  7. layui在open弹出层回显,解决动态select数据回显问题

    //监听数据表格工具条         table.on('tool(contentList)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 l ...

  8. layui——上传图片,并实现放大预览

    一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能 function uploadSmallPic() { var upload = layui.upload; up ...

  9. 使用Dropzone上传图片及回显演示样例

    一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"> <div class="col-md-12" ...

随机推荐

  1. 一文搞懂transform: skew

    如何理解斜切skew,先看一个demo.在下面的demo中,有4个正方形,分别是 红色:不做skew变换, 绿色:x方向变换, 蓝色:y方向变换, 黑色:两个方向都变换, 拖动下面的滑块可以查看改变s ...

  2. Redis的初识

    简介 已经有了Membercache和各种数据库,Redis为什么会产生?Redis纯粹为应用而产生,它是一个高性能的key-value数据库.Redis的出现,很大程序补偿了Memcached这类k ...

  3. node.js常用的全局成员和对象

    一般可以直接调用的对象,我们称之为全局对象: 一下对象都加了console.log(),以在运行环境中的显示效果为标准 //包含文件名称的全路径:    console.log(_filename); ...

  4. ParquetDecodingException: Can not read value at 0 in block -1 in file hdfs:...

    : jdbc:hive2://master01.hadoop.dtmobile.cn:1> select * from cell_random_grid_tmp2 limit 1; INFO : ...

  5. Gson的解析Json数据的两种方式

    转载:https://blog.csdn.net/huplion/article/details/78984977 在线JSON字符串转Java实体类(JavaBean.Entity): https: ...

  6. 洛谷 P2341 【受欢迎的牛】

    题库:洛谷 题号:2341 题目:受欢迎的牛 link:https://www.luogu.org/problemnew/show/P2341 思路:因为奶牛的爱慕关系具有传递性,所以每个环(强连通分 ...

  7. CF #541 E. String Multiplication

    题意: 给定一系列字符串,每次都是后一个字符串和前面的融合,这个融合操作就是原来的串分成独立的,然后把新串插入到这些空格中.问最后,最长的相同连续的长度. 思路: 这道题可以贪心的来,我们压缩状态,记 ...

  8. 洛谷P1352没有上司的舞会+树形二维DP

    传送门 题意:上司和直接下属,不能同时去一个聚会,问可邀请到的人的快乐值最大是多少: 参考:https://www.luogu.org/blog/mak2333/solution-p1352 思路: ...

  9. CodeForces 55D Beautiful numbers(数位dp+数学)

    题目链接:http://codeforces.com/problemset/problem/55/D 题意:一个美丽数就是可以被它的每一位的数字整除的数. 给定一个区间,求美丽数的个数. 显然这是一道 ...

  10. Junit测试Controller(MockMVC使用),以及传输@RequestBody数据解决办法

    转自:http://www.importnew.com/21153.html 一.单元测试的目的 简单来说就是在我们增加或者改动一些代码以后对所有逻辑的一个检测,尤其是在我们后期修改后(不论是增加新功 ...