blog_tp6/view/sys/file_manager/uploadimg.html

<!-- <div class="cl pd-5 bg-1 bk-gray">
        <a href="{:url('/file_manager/selectpicture')}" class="btn btn-default radius sethumb">
            <i class="Hui-iconfont">&#xe600;</i> 站内选择 </a>&nbsp;&nbsp;
        <a href="javascript:void(0);" class="btn btn-primary radius sethumb">
            <i class="Hui-iconfont">&#xe600;</i> 本地上传 </a>&nbsp;&nbsp;
        <a href="{:url('/file_manager/onlinepicture')}" class="btn btn-default radius sethumb">
            <i class="Hui-iconfont">&#xe600;</i> 网络图片 </a>&nbsp;&nbsp;
    </div> -->
<!-- 本地上传 -->
<style>
    #online {
        width: 100%;
        height: 224px;
        padding: 10px 0 0 0;
    }

    #online #imageList {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        margin-left: 20px;
    }

    #online ul {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #online li {
        float: left;
        display: block;
        list-style: none;
        padding: 0;
        width: 113px;
        height: 113px;
        margin: 0 0 9px 9px;
        background-color: #eee;
        overflow: hidden;
        cursor: pointer;
        position: relative;
    }

    #online li img {
        cursor: pointer;
    }

    #online li .icon {
        cursor: pointer;
        width: 113px;
        height: 113px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        border: 0;
        background-repeat: no-repeat;
    }

    #online li .icon:hover {
        width: 107px;
        height: 107px;
        border: 3px solid #1094fa;
    }

    #online li.selected .icon {
        background-image: url(/static/images/success.png);
        background-image: url(images/success.gif)\9;
        background-position: 75px 75px;
    }

    #online li.clearFloat {
        float: none;
        clear: both;
        display: block;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }
</style>

<div id="tab-img" class="HuiTab">
    <div class="tabBar clearfix">
        <span>本地上传</span>
        <span>网络文件上传</span>
        <a onclick="onlinepicture(1)"><span>服务器图片选择</span></a>
    </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-4 col-sm-4">
                        <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}>
                    <div class="formControls col-xs-12 col-sm-8">
                        <div class="skin-minimal">
                            <div class="check-box">
                                <input type="checkbox" name="overwrite" value="{$overwrite}" {$overwrite ? 'checked'
                                    : "" }>
                                <label for="overwrite">覆盖原图</label>
                            </div>
                            <div class="check-box">
                                <input type="checkbox" name="water" value="{$water}" {$water ? 'checked' : "" }>
                                <label for="water">水印</label>
                            </div>
                            <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;">缩略图高度
                            </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="uploadImg()">
                        <input class="btn btn-default radius" type="button" value="&nbsp;取&nbsp;消&nbsp;"
                            onClick="layer_close();">
                    </div>
                </div>
            </form>
        </div>
        <!-- 本地上传end -->
    </div>
    <div class="tabCon">

    </div>
    <!-- 在线图片 -->
    <div class="tabCon">

    </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");
        $(document).on("click", "#online li", function(){
            $("#online li").removeClass('selected');

            $(this).addClass('selected');

            img = $(this).children('img').attr('_src');

            $("#online_file").val(img);
        })
    });

    function onlinepicture(page) {
        var data = { "page": page };
        $.ajax({
            url: '{:url("file_manager/onlineimg")}',
            type: 'GET',
            async: true,
            cache: false,
            data: 'page=' + page,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    html_str = "";
                    res.list.forEach(element => {
                        html_str += '<li><img width="170" height="113" src="' + element.url + '?noCache=' + element.mtime + '"';
                        html_str += '_src="' + element.url + '">';
                        html_str += '<span class="icon"></span></li>';
                    });
                    $('ul.list').prepend(html_str);
                }
            }
        });
    }

    //step1本地上传图片
    function uploadImg() {
        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/uploadimg")}',
                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);
                        console.log(res);
                        var img = res.picture_url + res.picname;
                        window.parent.$("#" + res.img_id).val(img);

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

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

    // 网络图片
    function uploadUrlImg() {
        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(res);
                        // layer.close(loadIndex);
                        var img = res.picture_url + res.picname;
                        window.parent.$("#" + res.img_id).val(img);

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

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

    function uploadOnlineImg() {
        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) {
                    if (res.code == 0) {
                        // console.log(res);
                        // layer.close(loadIndex);
                        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.close(loadIndex);
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                }
            });
        }
    }
</script>
<!--请在上方写此页面业务相关的脚本-->