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 上传图片 实现过程的更多相关文章

  1. Layui 上传图片到磁盘上 + Tomcat 配置虚拟路径

    Layui 上传图片到磁盘上 + Tomcat 配置虚拟路径 Tomcat 配置虚拟路径 找到 eclipse 中 tomcat 下面的 server.xml 文件,在 Host 标签里面添加 < ...

  2. Thinkphp5+Layui上传图片

    ThinkPHP是一个免费开源的,快速.简单的面向对象的轻量级PHP开发框架,是为了敏捷WEB应用开发和简化企业应用开发而诞生的.ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能 ...

  3. thinkphp结合layui上传图片

    简单示例: <script type="text/javascript"> layui.use(['form', 'layedit','element', 'layda ...

  4. Layui上传图片 带接口

    layui.use('upload', function () { var upload = layui.upload; upload.render({ elem: '#LAY_avatarUploa ...

  5. 上传头像，layui上传图片

    layui上传与bootstrap上传相似,只是不需要下插件, layui自带的已够用 先看一下前台界面,这里是用到的上传头像 先点击开始上传,头像上传至服务器中, 返回json添加至form表单中, ...

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

    一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能 function uploadSmallPic() { var upload = layui.upload; up ...

  7. layui 动画 实现过程

    layui官方文档晦涩难懂,对小白特别不友好 为演示效果,js和css文件引用cdn 演示是ul套li标签进行演示,这不是固定的,你也可以div套div,div套span,外面和里面的标签类要一一对应 ...

  8. layui上传图片接口

    mvc中 前台调用接口 url:"../upload/uploadfiles/" 然后开始接口 代码: string a = ""; try { HttpFil ...

  9. layui 上传图片回显并点击放大实现

    1.页面代码布局 <div class="layui-col-xs12 form-group"> <div class="layui-col-xs6&q ...

随机推荐

  1. 面向开发人员的Windows错误报告（WER）

    Windows错误报告是更新的Windows XP上Dr.Watson的替代品.它监视故障并收集可以发送到要分析的服务器(如果用户允许)的有用信息.这项功能帮助微软修复了很多错误——由于收到的报告,微 ...

  2. 文本编辑器vim——三种模式、显示行号、插入命令、行快速定位、行内定位

    1.vim的三种工作模式: (1)利用vim命令新建文件: 点击entre键执行命令后,开始向文本中输入想要写入的内容: (2)命令行模式(ESC): 不管用户处于何种模式,只要单击Esc键,即可进入 ...

  3. 3.深入学习Servlet的Response和Request

    一.HttpServletResponse web服务器接受到客户端的HTTP请求,对于这个请求分别创建一个代表请求的对象HttpServletRequest和一个代表响应的对象HttpServlet ...

  4. ESA2GJK1DH1K微信小程序篇: 测试微信小程序扫描Air202上面的二维码绑定设备,并通过MQTT控制设备

    前言 一,微信小程序篇小程序下载(该功能为小程序篇基础功能源码) 实现功能概要 微信小程序通过扫描GPRS上的二维码,绑定GPRS设备.然后使用小程序通过GPRS远程控制开发板上的继电器, 远程显示单 ...

  5. [RN] React Native 仿美团下拉筛选菜单控件

    React Native 仿美团下拉筛选菜单控件 演示效果如下: 使用方法如下: 1.安装 npm install react-native-dropdownmenus --save react-na ...

  6. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  7. 退役III次后做题记录（扯淡）

    退役III次后做题记录(扯淡) CF607E Cross Sum 计算几何屎题 直接二分一下,算出每条线的位置然后算 注意相对位置这个不能先搞出坐标,直接算角度就行了,不然会卡精度/px flag:计 ...

  8. Pytorch卷积神经网络识别手写数字集

    卷积神经网络目前被广泛地用在图片识别上, 已经有层出不穷的应用, 如果你对卷积神经网络充满好奇心,这里为你带来pytorch实现cnn一些入门的教程代码 #首先导入包 import torchfrom ...

  9. linux 排查cpu负载过高异常

    步骤一.找到最耗CPU的进程 工具:top 方法: 执行top -c ,显示进程运行信息列表 键入P (大写p),进程按照CPU使用率排序 图示: 如上图,最耗CPU的进程PID为10765 步骤二: ...

  10. 动态查找之二叉树查找 c++实现

    算法思想 二叉搜索树(又称二叉查找树或二叉排序树)BST树 二叉查找树 二叉查找树,也称二叉搜索树,或二叉排序树.其定义也比较简单,要么是一颗空树,要么就是具有如下性质的二叉树: (1)若任意节点的左 ...