利用layui,图片上传控件,成功上传图片,调用回调,利用jQuery修改隐藏的input的value,原本我是这么隐藏的:
<input type="text" style="display: none;" id="banner" name="image" value="{$banner.image}" class="layui-input layui-layer-input" lay-verify="required">后来修改为:
<input type="hidden" id="banner" name="image" value="{$banner.image}" class="layui-input layui-layer-input" lay-verify="required">就可以了。原因不明,但是记录一下,提醒自己。下面是完整代码:
<form class="layui-form">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">
<span class="x-red">*</span>图片名称
</label>
<div class="layui-input-block">
<input type="text" name="title" value="{$banner.title}" class="layui-input layui-layer-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">
<span class="x-red">*</span>图片
</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="cover">
<i class="layui-icon"></i>上传bannner
</button>
<div class="layui-input-inline" id="imgDiv" {empty name="$banner.image"}style="display: none;"{else /}style="display: block;"{/empty}>
<img id="preview" height="200px" src="{$banner.image}">
</div>
<!-- <input type="text" style="display: none;" id="banner" name="image" value="{$banner.image}" class="layui-input layui-layer-input" lay-verify="required">-->
<input type="hidden" id="banner" name="image" value="{$banner.image}" class="layui-input layui-layer-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">
</label>
<button class="layui-btn" lay-filter="add" lay-submit="">
{empty name="banner"}添加{else /}更新{/empty}
</button>
</div>
</form><script>
layui.use(['form', 'laydate', 'layer', 'upload'],
function() {
$ = layui.jquery;
var form = layui.form,
layer = layui.layer,
laydate = layui.laydate,
upload = layui.upload;
//执行一个laydate实例
laydate.render({
elem: '#start' //指定元素
,format: 'yyyy-MM-dd HH:mm:ss' //可任意组合
,type: 'datetime'
});
//执行一个laydate实例
laydate.render({
elem: '#end' //指定元素
,format: 'yyyy-MM-dd HH:mm:ss' //可任意组合
,type: 'datetime'
});
//上传图片
var uploadInst = upload.render({
elem:'#cover'
,url:'{:url("uploadBanner")}'
,accept:'file' // 允许上传的文件类型
,auto:true // 自动上传
,before:function (obj) {
// console.log(obj);
// 预览
obj.preview(function(index,file,result) {
// console.log(file.name); //图片名字
// console.log(file.type); //图片格式
// console.log(file.size); //图片大小
// console.log(result); //图片地址
$('#imgDiv')[0].style.display = 'block';
$('#preview').attr('src',result); //图片链接 base64
});
// layer.load();
}
// 上传成功回调
,done:function(res) {
$('#banner').val(res['data']['src']);
// console.log(res['data']['src']);
}
// 上传失败回调
,error:function(index,upload) {
// 上传失败
}
});
});
</script>
最新回复 (0)