利用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)