layui上传图片回显

图片上传成功后，在下方显示上传的图片内容

html代码

<button type="button" class="layui-btn" id="test1"><i class="layui-icon"></i>上传图片
</button>
<input type="text" id="pictureID" name="pictureID" />
<div class="layui-upload-list"><img class="layui-upload-img" name="picture" id="picture" th:value="*{picture}" width="300"/><p id="demo"></p>
</div>

js代码


//上传
var uploadInst = upload.render({elem: '#test1' //绑定元素,url: '/upload/' //上传接口,accept: 'file' //允许上传的文件类型,size: 50 //最大允许上传的文件大小,exts: 'png|jpg|jpeg',before: function (obj) { // 图片上传回调obj.preview(function (index, picture, result) {$('#picture').attr("src", result);});},done: function(res){//上传完毕回调if(res.code === 200){$('#pictureID').attr("value", res.data);layer.msg("成功！！");}},error: function(){//请求异常回调}
});// 修改的时候
layer.open({type: 1,titel: "测试图片上传",content: $('#pictureDivID') // 可以添加另外的页面 通过 div,area: ['40%','50%'],btnAlign: 'c' //居中,btn: ['按钮一', '按钮二', '按钮三'],yes: function(index, layero){//按钮【按钮一】的回调},btn2: function(index, layero){//按钮【按钮二】的回调//return false 开启该代码可禁止点击该按钮关闭},cancel: function(){//右上角关闭回调//return false 开启该代码可禁止点击该按钮关闭},success: function () {//将数据填充到，form 表单$('#picture').attr("src", "图片链接地址");}
});

layui上传图片回显相关推荐

Simditor 上传图片回显图片src base64 换成图片链接
Simditor 是一款简介好用的富文本插件使用过程中发现添加图片后,后台报错说字段太长,无法存入内容原因是:Simditor 没有找到上传图片后回显的图片地址,直接获取图片的源文件转成base ...
java上传图片回显_【java】批量上传图片并回显功能
一.前言在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能.可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到. ...
WebUploader 上传图片回显
/* fileMaxCount 最大文件数 buttonText 按钮文本 multiple 是否多选 */ (function ($) {$.fn.extend({uploadImg: functi ...
前端上传图片回显并用base64编码，后端做解码储存，存储图片路径在.properties文件中配置（以上传身份证照片为例）
前端页面: <form id="kycForm" enctype="multipart/form-data"> <input type=&qu ...
上传图片回显(上传到服务器)
No.1 :首先,在pom文件中导入依赖: <dependency><groupId>commons-fileupload</grou ...
layui radio 回显
$("input[name='isAlive'][value='1']").prop('checked','checked'); 然后 form.render('radio');
layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
淘淘商城学习笔记之上传图片到远程服务器，图片的回显出现的bug
最近在学习淘淘商城中用到的技术,感觉受益良多,遇到一个比较奇怪的bug调了好久,遂心乐之分享于诸君 bug情况是这样的:在商城的后台上传图片之后图片回显不出来,右键查看链接,发现链接被加了localh ...
java spring 上传图片,springboot 上传图片并回显
之前也有做过上传图片的功能,不过是用在ssm的项目中,也有很多的不完美. 这次用的springboot,基本上对上传图片又有了一定的认识,想再这里记录一下./** * 上传图片 * * @return ...
thymeleaf 复选框回显_Thymeleaf+layui+jquery复选框回显
一.Thymeleaf+layui+jquery复选框回显基于Thymeleaf模板下的layui+jquery复选框回显,主要是jquery.大致意思是:把数组转成JSON传到前台,再在前台转回数 ...

layui上传图片回显

layui上传图片回显相关推荐

最新文章

热门文章