• 【LayerUI】上传图片(多图,非拖拽)


    原理:用upload.render() 组件实现上传,服务端保存好图片返回路径,这种只适合上传即保存的功能,如果想上传多张后再一次保存,不建议使用。

    <script>
                    //多图上传
                    layui.use('upload', function () {
                        var $ = layui.jquery
                        , upload = layui.upload;
                        var uploadInstss = upload.render({
                            elem: "#uploadPic"
                            , multiple: true
                            , url: '接口地址'
                            , exts: 'jpg|png' //只允许图片
                            , done: function (res) {
                                $("#noMsgDIV").hide();
                                //如果上传失败
                                if (res.code > 0)
                                {
                                    return layer.msg('上传失败');
                                }
                                //上传成功
                                if (!res.error) {
                                    AppendPic(res.FileName)
                                }
                            }
                            , 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();
                                });
                            }
                        });
                    })
    
                function AppendPic(FileName) {
                        if ($(".contentpic").length >= 5) {
                            return layer.msg('最多上传5张图片。');
                        }
                        var html = "<div class="contentpic" style="display: inline-block;margin:7px;">" +
                                    "<img src="" + FileName + "" style="240px;height:120px;" />" +
                                    "<div onclick="delPic(this)" class="layui-btn layui-btn-sm layui-btn-normal delbtn"><i class="layui-icon"></i>删 除</div>" +
                                    "</div>";
    
                        var abhtml = $("#Big_ContentPic").html();
    
                        abhtml += html;
                        $("#Big_ContentPic").html(abhtml)
                    }
    
                    function delPic(thisObj) {
                        $(thisObj).parent().remove();
                //这里可写成删除图片ajax请求 }
    </script>
  • 相关阅读:
    LeetCode 1109 航班预定统计
    leetcode 138 复制带随机指针的链表
    maven导入org.apache.pdfbox
    Intellij Idea 通过svn或者git提交代码时速度慢的解决办法
    java LocalDateTime 加减当前时间
    git命令--拉取代码和切换分支
    Intellij IDEA插件Free Mybatis plugin
    MySQL 生成随机字符串 uuid
    最新版Navicat Premium v15.0.26 中文破解
    算法——二分法查找
  • 原文地址:https://www.cnblogs.com/laokchen/p/12724397.html
Copyright © 2020-2023  润新知