layui上传图片回显

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

 

html代码

<button type="button" class="layui-btn" id="test1">
    <i class="layui-icon">&#xe67c;</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", "图片链接地址");

    }
});

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值