scd_tools_go/service/static/module/upload_img.html

<link rel="stylesheet" href="/static/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/static/css/common.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/zTreeStyle/global.css">
<script type="text/javascript" src="/static/js/ztree/jquery.ztree.all_useicon.js"></script>

<style type="text/css">
    .layui-tree-icon {
        border: 1px solid #6668;
    }

    .layui-tree-txt {
        color: #8385a2;
    }

    .layui-tree-txt-active {
        color: #7575f9 !important;
    }

    .upload_combox_drown {
        width: 125px;
        display: block !important;
        float: left;
        height: 32px;
        line-height: 32px;
        background-color: #ffffff !important;
        color: #233C7F;
        border: 1px solid #233C7F;
        margin-right: 7px;
        padding-left: 5px;
    }

    .upload_combox_drown > option {
        color: #233C7F;
    }

    .upload_combox_drown > option:hover {
        background-color: #ffffff !important;
    }

    .button_upload {
        float: left;
        background-image: linear-gradient(#1E9FFF, rgb(68 68 195));
        color: #fff;
        font-size: 14px;
        border: none;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        border-radius: 2px;
        width: 100%;
        text-align: center;
    }

    .image_box {
        width: 125px;
        padding: 0;
        margin: 0 auto;
    }

    .image_box > img {
        width: 100%;
        height: 125px;
        margin-bottom: 5px;
    }

    .upload_img_input {
        float: left;
        width: 125px;
        height: 30px;
        font-size: 1.6rem;
        font-weight: 500;
        border: 1px solid #233C7F;
        outline: none;
        background-color: transparent;
        color: #233C7F;
        padding: 0 0.8rem;
        margin-right: 10px;
    }

    .list_image_box {
        float: left;
        width: 100px;
        height: 100px;
        margin: 0 20px 15px 0;
        cursor: pointer;
        position: relative;
        box-shadow: 2px 2px 9px 2px rgb(223 227 241) !important;
    }

    .list_image_box > img {
        float: left;
        width: 100px;
        height: 100px;
        margin: 0px;
        cursor: pointer;
    }

    .list_image_box > div {
        position: absolute;
        bottom: 0px;
        width: 20px;
        height: 20px;
        text-align: center;
        background-color: green;
        border-radius: 100px;
        color:#ffffff;
        right: 0px;
    }

    .layui-this-active {
        border-bottom: 2px solid #326cde;
        color: #326cde;
        font-weight: bold;
    }

    .upload_search_icon {
        float: left;
        cursor: pointer;
        font-size: 30px;
    }

    .upload_person_image_library {
        width: 95%;
        padding: 10px;
        height: 100%;
        margin: 0 auto;
    }

    .upload_person_face {
        height: 12rem;
        width: 12rem;
        float: left;
        margin: 0 15px 30px 0;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
        cursor: pointer;
        padding: 2px 2px 0 2px;
        box-shadow: 2px 2px 9px 2px rgb(159 163 175) !important;
    }

    .upload_person_face_choice {
        position: absolute;
        width: 20px;
        height: 20px;
        text-align: center;
        background-color: green;
        border-radius: 100px;
        color:#ffffff;
        right: 5px;
        bottom: 5px;
    }

    .upload_person_face_choice > i {
        float: left !important;
        margin: 2px 0 0 2px !important;
    }

    .upload_person_face > img {
        width: 100%;
        height: 100%;
    }

    .upload_person_face_name {
        height: 3rem;
        width: 9.9rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        line-height: 3rem;
        margin: 0.3rem auto 0 auto;
        text-align: center;
        color: #233C7F;
        font-weight: 400;
        position: relative;
    }

    .layui-flow-more {
        float: left;
        width: 100%;
    }

    #form_upload a, #form_upload body {
        cursor: default;
    }

</style>

<form class="layui-form" id="form_upload" style="float:left;width:100%;height:100%;">
    <div class="layui-tab " style="float:left;width:100%;margin:0px;height:100%;border:none !important;">
        <ul class="layui-tab-title" style="background-color:transparent;border-bottom:2px solid #2a345c;">
            <li class="layui-this-active" onclick="SwitchTab(this);" flag="avator-upload">头像上传</li>
            <li flag="face-storage" onclick="SwitchTab(this);">抓拍库</li>
            <li flag="person-storage" onclick="SwitchTab(this);">人员库</li>
        </ul>
        <div class="layui-tab-content">
            <!--头像上传展示-->
            <div class="layui-tab-item layui-show" for="avator-upload">
                <div style="display: none;" class="form_upload_content">
                    <span style="float:left;width:100%;text-align:center;padding:0;">人员头像选择</span>
                    <div class="layui-upload-list image_box" id="upload_image_box">
                        <img src="/static/images/userhead.png" id="image_object" url=""/>
                        <span class="button_upload">
                    <i class="layui-icon layui-icon-upload-drag"></i>
                    <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>
                    <span>上传头像</span></span>
                    </div>
                </div>
            </div>
            <!--抓拍库展示-->
            <div class="layui-tab-item search_area" for="face-storage">
                <div style="float:left;width:36%;">
                    <ul id="tree_face" class="ztree tree" style="float:right"></ul>
                </div>
                <div style="float:right;width:62%;height:100%;">
                    <div class="select_area" id="select_area_image" style="width:90%;float: right;"></div>
                </div>
            </div>
            <!--人员库展示-->
            <div class="layui-tab-item" for="person-storage">
                <div style="line-height:32px;float:left;width:100%;">
                    <span style="float:left;padding:0 5px 0 30px;">人员标记：</span>
                    <select class="upload_combox_drown" id="upload_person_mark"></select>
                    <span style="float:left;padding:0 5px;">职业：</span>
                    <select class="upload_combox_drown" id="upload_person_occupation"></select>
                    <span style="float:left;padding:0 5px;">性别：</span>
                    <select class="upload_combox_drown" id="upload_person_gender" style="width:80px;">
                        <option value=""></option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                    <span style="float:left;padding:0 5px;">姓名：</span>
                    <input class="upload_img_input" id="upload_text_person_name"/>
                    <i class="layui-icon layui-icon-search upload_search_icon" title="立即查询"></i>
                </div>
                <div style="float:left;width:100%;">
                    <div class="upload_person_image_library"></div>
                </div>
            </div>
        </div>
    </div>
</form>

<script type="text/javascript">
    var eleUploadImgContent = $("#form_upload .layui-tab-content");
    var UploadMessageObject = null;
    var Search_Person_Type = "";
    var CameraImageCondition = {
        "area_code": "",
        "camera_sn": "",
        "datatype": 1,
        "pageindex": 1,
        "pagesize": 50,
        "startdate": "",
        "enddate": ""
    }
    var UpLoadLoddingText = "<i class='layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop' style='margin-right:10px;'></i><span style='color:#ffffff;'>数据加载中...</span>";
    $(document).ready(function () {
        setTimeout(function () {
            Upload_File_Init();
        }, 100);
    });

    function CleanUploadImageContent() {
        var imgObject = $("#form_upload #image_object");
        imgObject.attr("src", "/static/images/userhead.png").attr("url", "");
        $("#select_area_image").html("");
        $("#form_upload .layui-tab-title>li:first").trigger("click");
    }

    function SwitchTab(event) {
        var index = $(event).index();
        if (index == 1) { //抓拍库
            if ($('#form_upload #tree_face').children().length == 0) {
                upload_load_tree();
            }
        } else if (index == 2) { //人员库
            LoadComboxInfo();
        }
    }

    //设置上传文件时的排除项
    //item参数为数组，其值分别为0,1,2，分别代表需要排除的项
    function Set_Upload_Remove_Item(item) {
        if (item instanceof Array) {
            for (var i = 0; i < item.length; i++) {
                var index = item[i];
                if (index == "0") {
                    $("#form_upload .layui-tab-title li[flag='avator-upload']").remove();
                    $("#form_upload .layui-tab-content div[for='avator-upload']").remove();
                } else if (index == "1") {
                    $("#form_upload .layui-tab-title li[flag='face-storage']").remove();
                    $("#form_upload .layui-tab-content div[for='face-storage']").remove();
                } else if (index == "2") {
                    $("#form_upload .layui-tab-title li[flag='person-storage']").remove();
                    $("#form_upload .layui-tab-content div[for='person-storage']").remove();
                } else {
                    layer.msg("参数不在可选择范围内！");
                }
            }
            $("#form_upload .layui-tab-content div:first").addClass("layui-show");
        } else {
            layer.msg("参数只能为数组");
        }
    }

    function Upload_File_Init() {
        var h = $("#form_upload").height() - 75;
        $("#form_upload .layui-tab-content>div").height(h);
        $("#form_upload .upload_person_image_library").parent().height(h - 40);
        $(".form_upload_content").show().css("margin-top", ((h - 200) / 2) + "px");
        $("#form_upload .layui-tab-title>li").off("click").on("click", function (e) {
            //阻止触发layui事件
            e.preventDefault();
            e.stopPropagation()
            $("#form_upload .layui-tab-title .layui-this-active").removeClass("layui-this-active");
            $(this).attr("class", "layui-this-active");
            eleUploadImgContent.find(".layui-show").removeClass("layui-show");
            eleUploadImgContent.find(".layui-tab-item[for='" + $(this).attr("flag") + "']").addClass("layui-show");
        });
        eleUploadImgContent.find("#tree_face").slimScroll({
            height: h + "px",
            width: "100%",
            alwaysVisible: false,
            wheelStep: 10,
            size: "6px",
            color: "#03aee7"
        });
        eleUploadImgContent.find(".select_area").height(h).slimScroll({
            height: (h) + "px",
            width: "96%",
            alwaysVisible: false,
            wheelStep: 10,
            size: "6px",
            color: "#03aee7"
        });
        layui.upload.render({
            elem: '#upload_image_box .button_upload',
            url: Global.AccessUrl + '/api/police/uploadfile',
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    $("#upload_image_box .button_upload>span").html("上传中...");
                    $("#upload_image_box .layui-icon-upload-drag").hide();
                    $("#upload_image_box .layui-anim-rotate").removeClass("layui-hide");
                    $('#upload_image_box #image_object').attr('src', result);
                });
            },
            done: function (result) {
                if (result["success"]) {                    
                    $("#upload_image_box .button_upload>span").html("人脸检测中...");
                    $.post(Global.AccessUrl+"/api/police/getimgfeartrue",{"imgpath_abs":result["data"]},function(r){
                        if(r.success){
                            var result=r.data;
                            if(result.code!=null&&result.code=="500"){
                                $("#upload_image_box #image_object").attr("url", "");
                                var reg=/[\u4e00-\u9fa5]+/g;
                                var errmsges = result.errmsg.match(reg);
                                DialogObject.Msg((errmsges!=null && errmsges.length>0) ? errmsges[0]:result.errmsg);
                                $("#upload_image_box img").attr("src","/static/images/userhead.png");
                                $("#upload_image_box .button_upload>span").html("重新上传");
                                return;
                            }else{
                                $("#upload_image_box .button_upload>span").html("上传成功");
                                $("#upload_image_box #image_object").attr("url", result["img"]);
                            }
                        }else{
                            DialogObject.Msg(r.msg);
                            $("#upload_image_box img").attr("src","/static/images/userhead.png");
                            $("#upload_image_box #image_object").attr("url", "");
                            $("#upload_image_box .button_upload>span").html("重新上传");
                        }
                    });
                } else {
                    return DialogObject.Msg('上传失败');
                }
            },
            //进度条
            progress: function (n, elem, e) {
                if (n == 100) {
                    setTimeout(function () {
                        $("#upload_image_box .layui-icon-upload-drag").show();
                        $("#upload_image_box .layui-anim-rotate").addClass("layui-hide");
                    }, 100);
                }
            }
        });
        //人员库数据查询及点击事件
        $("#form_upload .upload_search_icon").off("click").on("click", function () {
            var parameter = {};
            parameter["person_occupation"] = $("#upload_person_occupation").val();
            parameter["person_mark"] = $("#upload_person_mark").val();
            parameter["person_name"] = $.trim($("#upload_text_person_name").val());
            parameter["person_gender"] = $("#upload_person_gender").val();
            parameter["person_sculpture"] = 1;
            parameter["pagesize"] = 5000;
            parameter["persontype"] = Search_Person_Type;
            $.getJSON(Global.AccessUrl + "/api/person/search", parameter, function (result) {
                if (result["code"] == 0) {
                    var data = result["data"];
                    var htmlObject = null;
                    if (data == null || data == "" || data.length == 0) {
                        htmlObject = "<div style='text-align: center;line-height: 5rem;color: #999;'>未查询到人员头像数据！</div>";
                        $("#form_upload .upload_person_image_library").html(htmlObject);
                    } else {
                        var path = null, index = null;
                        for (var i = 0; i < data.length; i++) {
                            path = data[i]["PERSON_AVATOR_PATH"];
                            data[i]["face_url"] = path;
                            if (path != null && path != "") {
                                if (path.substr(0, 4) != "http") {
                                    index = path.indexOf("static/");
                                    if (index > -1)
                                        data[i]["face_url"] = Global.AccessUrl + path.substr(index);
                                }
                            }
                        }
                        htmlObject = template("upload_person_face_temp", {"data": data});
                        $("#form_upload .upload_person_image_library").html(htmlObject);

                        $("#form_upload .upload_person_image_library .upload_person_face").off("click").on("click", function () {
                            if ($(this).find(".upload_person_face_choice").length == 0) {
                                $("#form_upload .upload_person_image_library .upload_person_face_choice").remove();
                                var html = "<div class='upload_person_face_choice'><i class='layui-icon layui-icon-ok'></i></div>";
                                $(this).append(html);
                            } else {
                                $(this).find(".upload_person_face_choice").remove();
                            }
                        });

                    }
                }
            });
        });
    }

    //加载下拉列表框内容
    function LoadComboxInfo() {
        //加载
        $.getJSON(Global.AccessUrl + "/api/getGlobalCode", {"pcode": "duty"}, function (result) {
            if (result["code"] == 0) {
                var htmlObject = template("upload_combox_code", {"data": result["data"]});
                $("#upload_person_occupation").html(htmlObject);
            }
        });
        $.getJSON(Global.AccessUrl + "/api/getGlobalCode", {"pcode": "identification"}, function (result) {
            if (result["code"] == 0) {
                var htmlObject = template("upload_combox_code", {"data": result["data"]});
                $("#upload_person_mark").html(htmlObject);
            }
        });
    }

    //获得文件图片地址
    function GetImageFilePath() {
        var imageInfo = {"filepath": "", "faceid": "", "type": "0", "personid": 0, "avtorid": 0};
        var flag = $("#form_upload .layui-this-active").attr("flag");
        var choiceObject = null;
        if (flag == "avator-upload") {
            imageInfo["filepath"] = $("#image_object").attr("url");
            imageInfo["absolute_path"] = $("#image_object").attr("url");
            imageInfo["type"] = "1";
        } else if (flag == "face-storage") {
            choiceObject = $(".select_area .layui-icon-ok");
            if (choiceObject.length > 0) {
                imageInfo["filepath"] = choiceObject.parent().prev().attr("src");
                imageInfo["absolute_path"] = Global.Absolute_path + choiceObject.parent().prev().attr("face_path");
                imageInfo["faceid"] = choiceObject.parent().prev().attr("faceid");
                imageInfo["type"] = "0";
            }
        } else if (flag == "person-storage") {
            choiceObject = $(".upload_person_image_library .upload_person_face_choice").parent().find("img");
            if (choiceObject.length > 0) {
                imageInfo["filepath"] = choiceObject.attr("filepath");
                imageInfo["absolute_path"] = Global.Absolute_path + choiceObject.attr("filepath");
                imageInfo["faceid"] = choiceObject.attr("faceid");
                var personid = choiceObject.attr("person_id");
                if (personid != null && personid != "") {
                    imageInfo["personid"] = parseInt(personid);
                }
                var avtor_id = choiceObject.attr("avtor_id");
                if (avtor_id != null && avtor_id != null) {
                    imageInfo["avtorid"] = parseInt(avtor_id);
                }
                imageInfo["type"] = "0";
            }
        }
        return imageInfo;
    }

    function SetUploadInitialize(InitParameter) {
        if (InitParameter.hasOwnProperty("url")) {
            var url = InitParameter["url"];
            if (url == null || url == "")
                url = "/static/images/userhead.png";
            $("#image_object").attr("src", url).attr("url", "");
        }
        if (InitParameter.hasOwnProperty("persontype")) {
            Search_Person_Type = InitParameter["persontype"];
        }
    }

    function upload_load_tree() {
        //处理节点树
        eleUploadImgContent.find("#tree_face").height($("#form_upload").height() - 75);
        var html = Tools.LoadingText(null, 100, null);
        $("#form_upload #tree_face").html(html);
        Global.Ztree.Init($("#form_upload #tree_face"), {
            url: Global.AccessUrl + "/api/area/children/list?ext_datatype=camera",
            idKey: "id",
            pidKey: "pid",
            nameKey: "title",
            childrenNodeIcon: "fa-video-camera",
            callback: {
                onClick: function (event, treeId, node) {
                    var area_code = node["area_code"];
                    if (node["id"] == "0") {
                        QueryCameraImage("");
                    } else {
                        QueryCameraImage(area_code);
                    }
                },
                onAsyncSuccess: function (event, treeId, treeNode, msg) {
                    if (treeNode.children == null || treeNode.children.length == 0) return;
                    var treeObj = Global.Ztree.zTreeObj;
                    var pnode = treeObj.getNodeByTId(treeNode.tId);
                    for (var i = 0; i < treeNode.children.length; i++) {
                        if (treeNode.children[i].type != "camera") {
                            var x1 = treeObj.getNodeByParam("id", treeNode.children[i].id, pnode);
                            if (x1 == null) continue;
                            //将非摄像头节点的图标换成默认图标
                            var ele = $("#" + x1.tId + "_ico").removeClass("fa-video-camera").addClass("fa-home"); //
                            if (ele.hasClass("a_docu")) ele.removeClass("a_docu").addClass("a_docu_default");
                        }
                    }
                }
            }
        });


    }

    function QueryCameraImage(area_code) {
        CameraImageCondition.area_code = area_code;
        SearchCameraImage();
    }

    function SearchCameraImage() {
        $("#select_area_image").html("");
        var recordCount = 0;
        layui.flow.load({
            elem: '#select_area_image', //指定列表容器
            scrollElem: '#select_area_image', //滚动条所在元素
            end: '<p style="color:#ccc;">---图片已载完毕---</p>',
            isAuto: true,
            done: function (page, next) { //到达临界点（默认滚动触发），触发下一页的回调
                CameraImageCondition.pageindex = page;
                $.ajax({
                    type: "get",
                    dataType: "json",
                    data: CameraImageCondition,
                    async: true,
                    url: Global.AccessUrl + "/api/camera/device/list",
                    success: function (result) {
                        var lis = [];
                        if (result.code == 0 && result.data != null && result.data.length > 0) { //数据插入
                            if (CameraImageCondition.pageindex == 1) {
                                recordCount = result["count"];
                            }
                            layui.each(result.data, function (index, item) {
                                var htmls = [];
                                var url = item["img"];
                                if (url != null && url != "")
                                    url = Global.AccessUrl + url;
                                else
                                    url = "/static/images/userhead.png";
                                htmls.push("<div class='list_image_box' onclick='selectedCameraImage(this);'>");
                                htmls.push("<img onerror='this.src=\"/static/images/userhead.png\"' face_path='" + item["img"] + "' faceid='" + item["faceid"] + "' src='" + url + "' />");
                                htmls.push("</div>");
                                lis.push(htmls.join(""));
                            });
                            next(lis.join(''), page < Math.ceil(recordCount / 50));
                            var face_height = $(".main-body").height() - 170;
                            $("#select_area_image").slimScroll({
                                height: face_height + "px",
                                width: "100%",
                                start: "top",
                                alwaysVisible: false,
                                wheelStep: 10,
                                size: "6px",
                                color: "#03aee7"
                            });
                        } else {
                            next(lis.join(''), page < 0);
                        }
                    }
                });
            }

        })
    }

    function selectedCameraImage(event) {
        if ($(event).find("div").length == 0) {
            eleUploadImgContent.find(".select_area .list_image_box").find("div").remove();
            $(event).append("<div><i class='layui-icon layui-icon-ok' style='float:left;margin:2px 0 0 2px;'></i></div>");
        } else {
            $(event).find("div").remove("div");
        }
    }

</script>

<!--人员库头像列表-->
<script type="text/html" id="upload_person_face_temp">
    {{each data}}
    <div class="upload_person_face">
        <img src="{{$value.face_url}}" avtor_id="{{$value.PERSON_AVATOR_ID}}" filepath="{{$value.PERSON_AVATOR_PATH}}"
             person_id="{{$value.ID}}"
             onerror="this.src='/static/images/userhead.png';"/>
        <div class="upload_person_face_name">{{$value.PERSON_NAME}}</div>
    </div>
    {{/each}}
</script>

<!--人脸库时使用的查询条件-->
<script type="text/html" id="upload_combox_code">
    <option value=""></option>
    {{each data}}
    <option value="{{$value.code}}">{{$value.name}}</option>
    {{/each}}
</script>