layui 上传图片实现过程

Posted 2022-05-30 suguangti

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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%; width: 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>

以上是关于layui 上传图片实现过程的主要内容，如果未能解决你的问题，请参考以下文章

基于layUI的图片上传前预览功能的2种实现方式

layui框架实现多图片手动上传和随表单提交方法

layui——上传图片，并实现放大预览

基于THINKPHP+layui+Ajax无刷新实现图片上传预览

guns -10实现layui 弹窗table选中、拖拽图片上传、查看大图

thinkphp+layui多图上传thinkphp5+layui实现多图上传保存到数据库，可以实现图片自由排序，自由删除。

layui 上传图片 实现过程

layui 上传图片实现过程