Layui 踩坑---关于图片上传成功回调修改input的value失败问题


 利用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">&#xe67c;</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)
发新帖