博客列表 >layui 一个页面多个上传图片组件

layui 一个页面多个上传图片组件

有什么是忘不了的的博客
有什么是忘不了的的博客原创
2020年03月30日 16:06:573163浏览
<div class="layui-upload">
    <label class="layui-form-label">水印图片</label>
    <input type="hidden" name="logoInfoImage"  value="{$data['logoInfoImage']}">
    <button type="button" class="layui-btn ueditor" >上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img demo1"  >
        <p calss="demoText"></p>
    </div>
</div>

<div class="layui-upload">
    <label class="layui-form-label">logo图片</label>
    <input type="hidden" name="logoInfoImage"  value="{$data['logoInfoImage']}">
    <button type="button" class="layui-btn ueditor" >上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img demo1"  >
        <p calss="demoText"></p>
    </div>
</div>


var uploadInst = upload.render({
    elem: '.ueditor'
    ,url: '/admin/foundation/upload' //改成您自己的上传接口
    ,before: function(obj){
        var item = this.item;
        //预读本地文件示例,不支持ie8
        obj.preview(function(index, file, result){
        item.nextAll('div').find('img').attr('src',result);
        });
    }
    ,done: function(res){
        var item = this.item;
        //如果上传失败
        if(res.code == 0){
            return layer.msg(res.msg);
        }
        layer.msg(res.msg);
        item.prev().val(res.msg);
    }
    ,error: function(){
        //演示失败状态,并实现重传
        var demoText = item.nextAll('p');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
            uploadInst.upload();
        });
    }
});


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议