blog_tp6/view/sys/file_manager/uploadimg.html

<div id="tab-img" class="HuiTab">
    <div class="tabBar clearfix">
        <span>本地上传</span>
        <span>网络文件上传</span>
        <span>服务器图片选择</span>
        <input type="hidden" name="layer" id="layer" value="{$layer}">
        <input type="hidden" name="infoid" value={$infoid}>
        <input type="hidden" name="cjid" value={$cjid}>
    </div>
    <!-- 本地上传 -->
    <div class="tabCon">
        <div class="step1 active" style="margin-left:30px;">
            <form id="form-uploadimg" method="post" action="" enctype="multipart/form-data">
                <div class="row cl" style="margin-top:20px;">
                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>图片要求: </label>
                    <div class="formControls col-xs-8 col-sm-8">
                        格式 jpg,png,gif,jpeg,webp; 大小不超过4M.
                    </div>
                    <div class="col-3"> </div>
                </div>
                <div class="row cl" style="margin-top:20px;">
                    <label class="form-label col-xs-2 col-sm-2">
                        <span class="c-red">*</span>本地上传：</label>
                    <div class="formControls  col-xs-8 col-sm-8">
                        <input type="file" class="input-text" name="upload_file" id="upload_file">
                    </div>
                    <div class="col-3"> </div>
                </div>
                <div class="row cl" style="margin-top:20px;">
                    <input type="hidden" name="img_id" value={$img_id}>
                    <input type="hidden" name="infoid" value={$infoid}>
                    <input type="hidden" name="cjid" value={$cjid}>
                    <div class="formControls col-sm-12">
                        <div class="skin-minimal">
                            <div class="check-box">
                                <input type="checkbox" name="thumb" value="true" {$thumb ? 'checked' : "" }>
                                <label for="thumb-1">缩略图</label>
                                <input type="text" class="input-text" name="width" value={$width}
                                    style="width: 80px;">缩略图宽度
                                <input type="text" class="input-text" name="height" value={$height}
                                    style="width: 80px;">缩略图高度
                                <input type="checkbox" name="original" value="true" {$original ? 'checked' : "" } style="margin-left: 20px;">
                                <label for="overwrite">保留原图</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row cl" style="margin-top:30px;margin-left:30px;">
                    <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2">
                        <input class="btn btn-primary radius" type="button" value="&nbsp;确&nbsp;定&nbsp;"
                            onCLick="uploadLocalImg();">
                        <input class="btn btn-default radius" type="button" value="&nbsp;取&nbsp;消&nbsp;"
                            onClick="layer_close();">
                    </div>
                </div>
            </form>
        </div>
        <!-- 本地上传end -->
    </div>
    <!-- 网络图片 -->
    <div class="tabCon">
        <form id="form-uploadurlimg" method="post" action="" enctype="multipart/form-data">
            <div class="row cl" style="margin-top:20px;">
                <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>图片要求: </label>
                <div class="formControls col-xs-8 col-sm-8">
                    格式 jpg,png,gif,jpeg,webp; 大小不超过4M.
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl" style="margin-top:20px;">
                <label class="form-label col-xs-2 col-sm-2">
                    <span class="c-red">*</span>图片地址：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" name="url_file" id="url_file">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl" style="margin-top:20px;">
                <input type="hidden" name="img_id" value={$img_id}>
                <div class="formControls col-xs-12 col-sm-12">
                    <div class="skin-minimal">
                        <div class="check-box">
                            <input type="checkbox" name="thumb" value="{$thumb}" {$thumb ? 'checked' : "" }>
                            <label for="thumb-1">缩略图</label>
                            <input type="text" class="input-text" name="width" value={$width} style="width: 80px;">缩略图宽度
                            <input type="text" class="input-text" name="height" value={$height}
                                style="width: 80px;">缩略图高度
                            <input type="checkbox" name="original" value="{$original}" {$original ? 'checked' : "" } style="margin-left: 20px;">
                            <label for="overwrite">保留原图</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row cl" style="margin-top:30px;margin-left:30px;">
                <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2">
                    <input class="btn btn-primary radius" type="button" value="&nbsp;确&nbsp;定&nbsp;"
                        onCLick="uploadUrlImg()">
                    <input class="btn btn-default radius" type="button" value="&nbsp;取&nbsp;消&nbsp;"
                        onClick="layer_close();">
                </div>
            </div>
        </form>
    </div>
    <!-- 在线图片 -->
    <style>
        a.active-btn {
            color: #fff;
            background-color: #3bb4f2;
            border-color: #3bb4f2;
        }
    </style>
    <div class="tabCon">
        <a class="btn radius active-btn" id="database_picture"><i class="Hui-iconfont Hui-iconfont-jifen"></i>数据库模式</a>
        <a class="btn radius" id="directory_picture"><i class="Hui-iconfont Hui-iconfont-pages"></i> 目录模式</a>
        <div class="database online-picture">
            {include file="file_manager/database_picture" /}
        </div>
        <div class="directory online-picture" style="display: none;">
            {include file="file_manager/directory_picture" /}
        </div>
        <form id="form-uploadonlineimg" method="post" action="" enctype="multipart/form-data">
            <div class="row cl" style="margin-top:20px;">
                <label class="form-label col-xs-2 col-sm-2">
                    <span class="c-red">*</span>图片地址：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="hidden" name="img_id" value={$img_id}>
                    <input type="text" class="input-text" name="online_file" id="online_file">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl" style="margin-top:30px;margin-left:30px;">
                <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2">
                    <input class="btn btn-primary radius" type="button" value="&nbsp;确&nbsp;定&nbsp;"
                        onCLick="uploadOnlineImg()">
                    <input class="btn btn-default radius" type="button" value="&nbsp;取&nbsp;消&nbsp;"
                        onClick="layer_close();">
                </div>
            </div>
        </form>
    </div>
</div>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    jQuery.Huitab = function (tabBar, tabCon, class_name, tabEvent, i) {
        var $tab_menu = $(tabBar);
        // 初始化操作
        $tab_menu.removeClass(class_name);
        $(tabBar).eq(i).addClass(class_name);
        $(tabCon).hide();
        $(tabCon).eq(i).show();

        $tab_menu.bind(tabEvent, function () {
            $tab_menu.removeClass(class_name);
            $(this).addClass(class_name);
            var index = $tab_menu.index(this);
            $(tabCon).hide();
            $(tabCon).eq(index).show()
        })
    }

    $(function () {
        $.Huitab("#tab-img .tabBar span", "#tab-img .tabCon", "current", "click", "0");

        $("#database_picture").click(function () {
            $(".online-picture").css('display', 'none');
            $(".database").css('display', 'block');

            $(this).addClass('active-btn');
            $('#directory_picture').removeClass('active-btn');
        });

        $("#directory_picture").click(function () {
            $(".online-picture").css('display', 'none');
            $(".directory").css('display', 'block');

            $(this).addClass('active-btn');
            $('#database_picture').removeClass('active-btn');
        });
    });

    // 本地上传图片
    function uploadLocalImg() {
        var layer = $("#layer").val();
        if ($("#upload_file").val() == '') {
            layer.msg("请选择要上传的文件", {
                icon: 6,
                time: 1000
            });
            return false;
        } else {
            var formData = new FormData($("#form-uploadimg")[0]);
            $.ajax({
                url: '{:url("file_manager/uploadLocalImg")}',
                type: 'POST',
                async: true,
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                beforeSend: function () {
                    // loadIndex = layer.load();
                },
                success: function (res) {
                    if (res.code == 0) {
                        // layer.close(loadIndex);
                        if (layer == true) {
                            var img = res.thumb ? res.thumb : res.picname;

                            window.parent.$("#" + res.img_id).val(img);

                            window.parent.$("#view-" + res.img_id).attr('src', img);

                            layer_close();
                        } else {
                            layer.msg('上传成功', {
                                icon: 1,
                                time: 1000
                            }, () => {
                                window.location.reload();
                            });
                        }
                    } else {
                        // layer.close(loadIndex);
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                }
            });
        }
    }

    // 网络图片
    function uploadUrlImg() {
        var layer = $("#layer").val();
        if ($("#url_file").val() == '') {
            layer.msg("文件地址不可以为空", {
                icon: 6,
                time: 1000
            });
            return false;
        } else {
            var formData = new FormData($("#form-uploadurlimg")[0]);
            $.ajax({
                url: '{:url("file_manager/uploadUrlImg")}',
                type: 'POST',
                async: true,
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                beforeSend: function () {
                    // loadIndex = layer.load();
                },
                success: function (res) {
                    if (res.code == 0) {
                        console.log(layer);
                        // layer.close(loadIndex);
                        if (layer == true) {
                            var img = res.picname;
                            window.parent.$("#" + res.img_id).val(img);

                            if (res.thumbname) {
                                img = res.thumbname;
                                window.parent.$("#thumb").val(img);
                            }

                            window.parent.$("#view-" + res.img_id).attr('src', img);
                            layer_close();
                        } else {
                            window.location.reload();
                        }
                    } else {
                        // layer.close(loadIndex);
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                }
            });
        }
    }

    function uploadOnlineImg() {
        var layer = $("#layer").val();
        if ($("#online_file").val() == '') {
            layer.msg("文件地址不可以为空", {
                icon: 6,
                time: 1000
            });
            return false;
        } else {
            var formData = new FormData($("#form-uploadonlineimg")[0]);
            $.ajax({
                url: '{:url("file_manager/uploadOnlineImg")}',
                type: 'POST',
                async: true,
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                beforeSend: function () {
                    // loadIndex = layer.load();
                },
                success: function (res) {
                    // layer.close(loadIndex);
                    if (res.code == 0) {
                        if (layer == true) {
                            var img = res.picname;
                            window.parent.$("#" + res.img_id).val(img);
                            if (res.thumbname) {
                                img = res.thumbname;
                                window.parent.$("#thumb").val(img);
                            }
                            window.parent.$("#view-" + res.img_id).attr('src', img);
                            layer_close();
                        } else {
                            layer.msg('上传成功', {
                                icon: 1,
                                time: 1000
                            }, () => {
                                window.location.reload();
                            });
                        }
                    } else {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                }
            });
        }
    }
</script>
<!--请在上方写此页面业务相关的脚本-->