zoukankan      html  css  js  c++  java
  • layui 上传图片 实现过程

    layui.user一个页面只能有一个,写多了会实现js效果

    上传图片官方文档有很多功能,但是演示的代码只是一个一个功能演示,如果要综合起来js代码不是简单的拼凑,需要放在指定位置,比如下面的限制文件大小。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>layui动画测试</title>
            <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
            <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
            <script src="https://www.layuicdn.com/layui/layui.js"></script>
    
    </head>
    <body>
        <div style="text-align: center">
            <img data-anim="layui-anim-scaleSpring" class="layui-upload layui-anim" id="id_upload_img"
                 src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564555274864&di=f0897dc4a00cccc5f71bdd0d46fe1720&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F21%2F20160821230024_MyCYK.thumb.700_0.jpeg" style="border-radius: 50%;  18%">
            <div class="layui-word-aux">点击更换我的头像</div>
            <div class="layui-word-aux">上传图片限制大小 60kb</div>
        </div>
    
    <script>
        layui.use(['upload'], function () {
                var layer = layui.layer;
                var $ = layui.jquery
                    , upload = layui.upload;
            //普通图片上传开始
                var uploadInst = upload.render({
                    elem: '#id_upload_img',
                    url: '/user/upload_img/',
                    size: 60, //限制文件大小,单位 KB
                    before: function (obj) {
                    //预读本地文件示例,不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#id_upload_img').attr('src', result); //图片链接(base64)
                    });
                    },
                    done: function (res) {
                        //如果上传失败
                        if (res.status > 0) {
                            return layer.msg('上传失败');
                        }
                        //上传成功
                        }
                        , error: function () {
                        //演示失败状态,并实现重传
                    var demoText = $('#demoText');
                    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();
                        });
                        }
                        });
            //普通图片上传结束
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    [Dynamic Language] Python 命名参数
    [Dynamic Language] Python OrderedDict 保证按插入的顺序迭代输出
    div水平垂直居中
    项目小结(v1.2v1.4)
    如何能尽快看完一个网页的结构
    在项目中使用谁存储过程orTSQL语句
    UDP协议(数据报协议)
    风恋尘香欢迎你!!!
    .NEt牛人帮帮我!!!谢谢啦~~~
    LWUIT 简易漂亮的相册
  • 原文地址:https://www.cnblogs.com/suguangti/p/11275521.html
Copyright © 2011-2022 走看看