分享一个单图片上传预览

分享 已结 9 2108
Dick
Dick VIP1 2017-8-29
悬赏:20飞吻
CSS:
.bigimgdiv img{
cursor: pointer;
border: 1px solid #eee;
}
.bigimgdiv img:hover{
border: 1px solid #1E9FFF;
}
HTML代码:
<div class="bigimgdiv layui-input-inline" style="width:36px;"><img src="/images/nopic.png" alt="上传图片" width="36" height="36" id="bigimg" layer-src="/images/nopic.png"></div>
<div class="layui-input-inline" style="width:300px;"><input name="imgurl" id="imgurl" readonly="readonly" class="layui-input"></div>
<div class="layui-input-inline"><button type="button" class="layui-btn layui-btn-normal" name="file" id="file">上传图片</button></div>
JS代码:
//**预览大图**//
top.layer.photos({
photos: $(document).on('click','.bigimgdiv',function(){return this})
,anim: 0 //0-6的选择,指定弹出图片动画类型,默认随机
,closeBtn:1

});
//定义上传图片接口
upload.render({
elem: '#file'
,url: '改成你的图片接口'
,before: function(obj){
layer.load(); //上传loading
}
,done: function(res){
layer.closeAll('loading');
if (res.code==0){$("#imgurl").val(res.data.src);$("#bigimg").prop('src',res.data.src);$("#bigimg").attr('layer-src',res.data.src);layer.msg(res.msg);}
else if(res.code==1){layer.msg(res.msg); }
}
,error: function(){layer.msg("上传出错!");layer.closeAll('loading'); }
});
效果:
上传前:


上传后:


只是有一个问题,上传后的图片要点2次才能正确显示,是不是浏览器或者JS缓存的原因,我搞不定,请懂的人解决啦!
注意加载必须的LAYUI方法!
回帖
  • Else
    2017-8-30

    http://fly.layui.com/jie/12987/ 可是看看我发布的贴子,单图多图上传可以左右移动或删除。
    0 回复
  • 可以贴下完整的代码吗?按照你分享的 点击没有反映
    0 回复
  • <script>
    layui.use(['form','layer','upload','jquery'], function(){
    $ = layui.jquery;
    var form = layui.form()
    ,upload = layui.upload
    ,layer = layui.layer;

    //**预览大图**//
    top.layer.photos({
    photos: $(document).on('click','.bigimgdiv',function(){return this})
    ,anim: 0 //0-6的选择,指定弹出图片动画类型,默认随机
    ,closeBtn:1

    });
    //定义上传图片接口
    upload.render({
    elem: '#file'
    ,url: '改成你的图片接口'
    ,before: function(obj){
    layer.load(); //上传loading
    }
    ,done: function(res){
    layer.closeAll('loading');
    if (res.code==0){$("#imgurl").val(res.data.src);$("#bigimg").prop('src',res.data.src);$("#bigimg").attr('layer-src',res.data.src);layer.msg(res.msg);}
    else if(res.code==1){layer.msg(res.msg); }
    }
    ,error: function(){layer.msg("上传出错!");layer.closeAll('loading'); }
    });

    });
    </script>
    0 回复
  • <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <title>
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/x-admin.css" media="all">
    </head>
    <style>
    .bigimgdiv img{
    cursor: pointer;
    border: 1px solid #eee;
    }
    .bigimgdiv img:hover{
    border: 1px solid #1E9FFF;
    }
    </style>

    <body>
    <div class="x-body">
    <form class="layui-form">

    <div class="bigimgdiv layui-input-inline" style="width:36px;">
    <img src="/images/nopic.png" alt="上传图片" width="36" height="36" id="bigimg" layer-src="/images/nopic.png"></div>
    <div class="layui-input-inline" style="width:300px;">
    <input name="imgurl" id="imgurl" readonly class="layui-input">
    </div>
    <div class="layui-input-inline">
    <button type="button" class="layui-btn layui-btn-normal" name="file" id="file">上传图片</button>
    </div>

    </form>
    </div>
    <script src="./lib/layui/layui.js" charset="utf-8">
    </script>

    <script>
    layui.use(['form','layer','upload','jquery'], function(){
    $ = layui.jquery;
    var form = layui.form()
    ,upload = layui.upload
    ,layer = layui.layer;

    //**预览大图**//
    top.layer.photos({
    photos: $(document).on('click','.bigimgdiv',function(){return this})
    ,anim: 0 //0-6的选择,指定弹出图片动画类型,默认随机
    ,closeBtn:1

    });
    //定义上传图片接口
    upload.render({
    elem: '#file'
    ,url: '改成你的图片接口'
    ,before: function(obj){
    layer.load(); //上传loading
    }
    ,done: function(res){
    layer.closeAll('loading');
    if (res.code==0){$("#imgurl").val(res.data.src);$("#bigimg").prop('src',res.data.src);$("#bigimg").attr('layer-src',res.data.src);layer.msg(res.msg);}
    else if(res.code==1){layer.msg(res.msg); }
    }
    ,error: function(){layer.msg("上传出错!");layer.closeAll('loading'); }
    });

    });
    </script>

    </body>

    </html>
    0 回复
  • 上面是全部代码 难道是写错了?望指教
    0 回复
  • Dick
    2017-8-29
    @山姆大叔
    我加载了这些,你看看:
    layui.use(['element','form','layer','laydate','tree', 'util','layedit','upload','table'], function(){
    0 回复
  • Dick
    2017-8-29
    @山姆大叔 <input name="imgurl" id="imgurl" readonly class="layui-input">这个是用来保存返回路径的,用于发送到后台存入数据库!
    注意一下。
    0 回复
  • Dick
    2017-8-30
    @Else 你的这个不错
    0 回复
  • 曾经沧海
    2017-11-30
    0 回复
本帖已设置禁止回复