easyui+webuploader+ckeditor实现插件式多图片上传-添加图片权限(图片上传人是谁，只能看到自己的图片)

2022-12-20 11:15:34

需求：

实现过程及思路

1、先页面布局

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="../JS/EasyUI/themes/easyui.css" rel="stylesheet" />

    <link href="../JS/EasyUI/themes/demo.css" rel="stylesheet" />

    <link href="../JS/EasyUI/themes/icon.css" rel="stylesheet" />

    <link href="../JS/webuploader/webuploader.css" rel="stylesheet" />

    <style type="text/css">

        /*封面图样式*/

        .article-cover-images {

            margin-top: 5px;

        }

        .article-cover-images, .article-cover-preview {

            display: inline-block;

        }

        .article-cover-add {

            border: 1px solid #e8e8e8;

            background-color: #f0f1f3;

            -webkit-border-radius: 2px;

            -moz-border-radius: 2px;

            border-radius: 2px;

            cursor: pointer;

        }

        .article-cover-add {

            position: relative;

            width: 120px;

            height: 120px;

            margin-right: 20px;

            display: inline-block;

            cursor: pointer;

        }

            .article-cover-add::before {

                color: #ccc;

                content: '';

                position: absolute;

                left: 50%;

                top: 50%;

                width: 40px;

                margin-left: -20px;

                margin-top: -2.5px;

                border-top: 5px solid;

            }

            .article-cover-add::after {

                color: #ccc;

                content: '';

                position: absolute;

                left: 50%;

                top: 50%;

                height: 40px;

                margin-left: -2.5px;

                margin-top: -20px;

                border-left: 5px solid;

            }

        .wrapper-cover-picture {

            overflow: auto;

            margin: 20px auto;

            height: 320px;

            padding-left: 15px;

        }

        /*添加封面图的弹出框样式*/

        .wrapper-picture {

            overflow: auto;

            margin: 10px auto 0 auto;

            height: 270px;

            padding-left: 15px;

        }

        .img-item:nth-child(-n+5) {

            margin-top: 0;

        }

        .img-item:nth-child(n+5) {

            margin-bottom: 0;

        }

        .img-item {

            width: 120px;

            height: 120px;

            position: relative;

            display: inline-block;

            border: 1px solid #e8e8e8;

            margin: 10px;

            cursor: pointer;

        }

            .img-item.checked:before {

                content: "";

                display: block;

                position: absolute;

                top: 0;

                left: 0;

                width: 100%;

                height: 100%;

                z-index: 1;

                background-color: rgba(0,0,0,.5);

                background-image: url(data:image/png;base64,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);

                -moz-background-size: 40px 40px;

                background-size: 40px 40px;

                background-position: 100% 0;

                background-repeat: no-repeat;

                text-align: center;

                color: #fffacd;

            }

        /*多图片上传的弹出框*/

        .wrapper-add {

            width: 700px;

            height: 180px;

            margin-top: 120px;

            padding-top: 30px;

        }

        .add-item {

            margin: 20px auto 20px auto;

            display: block;

            border: none;

            cursor: auto;

        }

        .icon {

            height: 55px;

            margin-bottom: 20px;

            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA3CAYAAAC8TkynAAAAAXNSR0IArs4c6QAABERJREFUaAXtmU1IVFEUx53XWLYISpIIzJxFoxAZREGGhdgiRIKgj1W7NlGQbSoIC8K+yE1tir4WRZBkEVFI0KZyFVhRtNCVX6NDCO1c6KjT78gbeT7fe9437828+XpwuW/OPfec8//fr3PfhMoK7BkYGEimINXX14dS73a1ZtdQLPISAcUy0nY4SzPAjplikZdmQLGMtB3OhXMyFotVz87O3kGpOZlMbrZTDkoeiUQWz3PjOe9HPGEd/C+AV/phMN9saDLyxQpeBis0PDw8kZr2oVCorba2tjffRtEYr3GJKKXCKfBiJN/BG4lQfS8dg6pMFapeaQYU6siq4irNAFWmClUv7AewwcHB/RynF7C1W7fXT07RVVdX1+eH/UzaCA0NDS1+QzPm3KpOAX8Z3esQsJivS18ImKe6Agk35XeuPp72ABl5gHWawQtYZGK7U9cRUU4+ngiQaa8DtQQnbaJj2ZgjQq97QGrNO8FR0XHqXzY6Onpobm7uLMuqEUKT1P2apt2uqan5au7odkl7mgFm537/lqs6l7UPgP+I7cNg30hdRd2K7AttnV59eiWgXyEAFZ1lZgDXkkgkfgC2bVmjLqCtgxG/ZteuIvdEgBx1+m5v6UvaRMey0UE4MjJyDHAy6lUOagtN2O9A/+BKenbtngiQc54ArgpQswNdJsegq1wAMCcB3429crNNq9/oykb7mLLaqn0lmScCxHg0Gr1B1Ux5T4nrRd6b3eYATPtTAHlGWUV/5Qf9CBvlaeUOBkXPiZDBlqdXRv4EQLopSxIqF0b/8kGnBhKnU31UEjuvx2DKl6ca8E3z8/PPMZIuePG/CfBH3QbieQm4dWjWZxevZ9TfIV9jbnP7m33njNs+gRIQj8erCLoXAnz5JI+dprwhgGDD09PTr6gjboP2Uz+wGcCu3QX4Zj/BpGMrEALkrGfTO59OwH73yToBY2NjDYz8I7+BpGsvqwRMTk6u46+41xCwNt2A/e63Yh6gn9FPdMf3SDYeWqW+KoFNTU09RW+bim62dBxnAIlFC6P1iWDq9HIfQvomJia2ug2Qfuewddxtv0zr2xLAXTyK8zcEXWEMgt/7ZmZmfpLAHDHKnd7Z8few6bm+FTrZ9KvNkgDAVXAX7wHseitHyDcgf4veXd4db2FsepV8vOhB31HPyk82ZJYE8LnpFs4bFAJoZ5n0U3ZZ6UKOBvgXtLleMlb2MiFbRgDT9QCBt7twtgPdb6zxB+Pj41uM/ZBJstNqlOXa+5LrMDt8BaP5myBl/afzJDghvtPxD2U74BvTMeJXH9fXYcDLnxzpgpe4ywG9l1pKXjzmJXApL6L2MUgzAZ7v5D7GlhVTZgKy4jSXnJQIyKXRCCIWjWMrHoTjTPtUxSVL4HOmgwnIvhIuLRwOX4StfwEFmRG3gkdwqRjXqqurYyjvpNNL1WmjYjgIHYlfcAgewaUSw38SDL04/XLE4QAAAABJRU5ErkJggg==) no-repeat;

            background-position: 50%;

        }

        /*上传后的图片框*/

        p.imgWrap {

            position: relative;

            z-index: 2;

            line-height: 110px;

            vertical-align: middle;

            overflow: hidden;

            width: 110px;

            height: 110px;

            -webkit-transform-origin: 50% 50%;

            -moz-transform-origin: 50% 50%;

            -o-transform-origin: 50% 50%;

            -ms-transform-origin: 50% 50%;

            transform-origin: 50% 50%;

            -webit-transition: 200ms ease-out;

            -moz-transition: 200ms ease-out;

            -o-transition: 200ms ease-out;

            -ms-transition: 200ms ease-out;

            transition: 200ms ease-out;

        }

        .btn-chooseimg {

            background-color: #f85959;

            color: #fff;

            margin: 10px auto;

            font-size: 14px;

            display: block;

            overflow: hidden;

            position: relative;

            margin-bottom: 0;

            text-align: center;

            vertical-align: middle;

            border: 1px solid transparent;

            background-image: none;

            white-space: nowrap;

            -webkit-user-select: none;

            -moz-user-select: none;

            -ms-user-select: none;

            user-select: none;

            outline: 0;

            cursor: pointer;

            height: 40px;

            line-height: 38px;

            -webkit-border-radius: 4px;

            -moz-border-radius: 4px;

            border-radius: 4px;

            min-width: 100px;

            padding: 0 17px;

        }

        /*旋转、删除*/

        div.file-panel {

            position: absolute;

            height: 0;

            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;

            background: rgba( 0, 0, 0, 0.5 );

            width: 100%;

            top: 0;

            left: 0;

            overflow: hidden;

            z-index: 300;

        }

            /*删除*/

            div.file-panel span.cancel {

                background-position: -48px -23px;

            }

            div.file-panel span {

                width: 24px;

                height: 24px;

                display: inline;

                float: right;

                text-indent: -9999px;

                overflow: hidden;

                background: url(/JS/webuploader/icons.png) no-repeat;

                margin: 5px 1px 1px;

                cursor: pointer;

            }

                /*向右旋转*/

                div.file-panel span.rotateRight {

                    background-position: -24px -23px;

                }

                /*向左旋转*/

                div.file-panel span.rotateLeft {

                    background-position: 0 -23px;

                }

        .dialog-btn-add-images {

            height: 45px;

            margin: 0 30px 0 25px;

            border-bottom: 1px solid #eadbdb;

            padding-top: 10px;

        }

        .text-image-selected-count {

            display: inline-block;

            height: 30px;

            font-size: 16px;

            vertical-align: text-bottom;

            margin-left: 50px;

            color: red;

        }

            .text-image-selected-count #num_images_selected {

                display: inline-block;

                height: 30px;

                font-size: 16px;

                color: blue;

            }

    </style>

</head>

<body>

    <form id="Newform" method="post" enctype="multipart/form-data">

        <div>

            <input type="hidden" id="hdnNewsId" name="newsId" />

            <table style="border: 2px; margin: 20px;">

                <tr>

                    <th align="right">封面图：

                    </th>

                    <td>

                        <span style="color: Red">建议图片尺寸：258*246</span><br />

                        <%--<input type="file" name="txtFile" id="txtFile" />--%>

                        <div class="article-cover-images">

                            <div class="article-cover-add"><i class="iconfont icon-addnew "></i></div>

                        </div>

                    </td>

                </tr>

                <tr>

                    <th align="right">内容：

                    </th>

                    <td>

                        <textarea id="myEditor" name="Content" cols="100" data-sample="1" cols="80" onchange="formatCkedit()"></textarea>

                    </td>

                </tr>

            </table>

        </div>

    </form>

    <%--多图片选择上传dialog--%>

    <script type="text/html" id="dialog_upload_multiple_image">

        <div class="dialog-btn-add-images">

            <span class="btn-upload-image">本地上传</span>

            <span class="text-image-selected-count">已选择&nbsp;&nbsp;<span id="num_images_selected">0</span>/100&nbsp;&nbsp;张</span>

            <%--<a id="btn_upload_image" href="javascript:void(0);" class="easyui-linkbutton">本地上传</a>--%>

        </div>

        <div class="wrapper-picture">

        </div>

        <div id="images_pagination" class="easyui-pagination" style="background: #efefef; margin: 5px 29px 0 26px;">

        </div>

    </script>

    <script src="../JS/EasyUI/jquery-1.7.2.min.js"></script>

    <script src="../JS/EasyUI/jquery.easyui.min.js"></script>

    <script src="../JS/EasyUI/easyui-lang-zh_CN.js"></script>

    <script src="../JS/ckeditor/ckeditor.js?0"></script>

    <script src="../JS/webuploader/webuploader.js"></script>

    <script type="text/javascript">

        var oCKeditor;

        $(function () {

            oCKeditor = CKEDITOR.replace('myEditor', { height: '400px', width: '1000px', customConfig: '/Ckeditor测试/NewsManager.js' });

            //点击添加封面图

            $("div.article-cover-add").on("click", function (e) {

                //是否禁用弹出框的确定按钮 false默认不禁用

                var disabled = false;

                //获取CKEDITOR里面所有的图片

                var $wrapper_picture = $('<div class="wrapper-cover-picture"></div>');

                var $Ckeditor_image = $(CKEDITOR.instances.myEditor.getData()).find("img");

                if ($Ckeditor_image && $Ckeditor_image.length > 0) {

                    $Ckeditor_image.each(function (index, item) {

                        var $item = $(item);

                        $wrapper_picture.append('\

                        <div class="img-item">\

                            <img width="120" height="120" src="' + $item.attr("src") + '" alt="' + $item.attr("alt") + '"/>\

                        </div>');

                    });

                } else {

                    var disabled = true;//正文中不包含图片,禁用弹出框的确定按钮

                    $wrapper_picture.append('\

                        <p style="text-align:center;color:red;font-size: 30px;">正文中不包含图片，请先上传图片!</p>');

                }

                var easyui_dialog_content = $("<div></div>").append($wrapper_picture).html();

                //用Easy UI弹出框

                $("<div/>").dialog({

                    id: "AddCoverImageIframe",

                    content: easyui_dialog_content,

                    title: "添加封面图",

                    iconCls: 'icon-add',

                    height: 450,

                    width: 770,

                    modal: true,

                    buttons: [{

                        text: '确定',

                        disabled: disabled,

                        handler: function () {

                            //当前选择的image

                            var $image = $("div.img-item.checked img");

                            if ($image == undefined || $image.length <= 0) {

                                $.messager.alert("警告", "封面图不能为空，请选择封面图！")

                                return false;

                            }

                            $(".article-cover-images div.article-cover-add").html('<img width="142" height="120" src="' + $image.attr("src") + '" alt="' + $image.attr("alt") + '"/>');

                            //去掉＋号 before和after样式

                            $(".article-cover-images div.article-cover-add").append('<style>div.article-cover-add::before{display:none}</style>')

                            .append('<style>div.article-cover-add::after{display:none}</style>')

                            $("#AddCoverImageIframe").dialog('destroy'); //销毁dialog对象

                        }

                    }, {

                        text: '取消',

                        handler: function () {

                            $("#AddCoverImageIframe").dialog('destroy'); //销毁dialog对象

                        }

                    }],

                    onOpen: function () {//打开后触发

                        //选择图片(只能选择单张)

                        var $image_containers = $("div.img-item");

                        $image_containers.on("click", function (e) {

                            $image_containers.removeClass("checked");

                            $(this).addClass("checked");

                        });

                    },

                    onClose: function () {

                        $("#AddCoverImageIframe").dialog('destroy'); //销毁dialog对象

                    }

                });

            });

        });

    </script>

</body>

</html>

页面布局及样式

2、添加Ckeditor的插件

3、实现插件功能代码：

1、点击插件弹出图片选择框

2、弹出框后分页获取该用户上传的图片列表，并渲染分页控件

3、添加图片的选择事件，选择后的效果：

4、为了切换分页的时候图片的选中状态保持不变，需要再外部添加一个数组存储每次选择的图片的url

5、本地上传按钮：通过WebUploader实现多图片上传，选择好图片后立即调用接口上传到服务器，上传完成后重新分页获取图片列表，并刷新分页控件

4、选择好图片后点击确定：

循环上一步存储选择的图片url数组，并拼接对应的img标签添加到ckeditor中去

5、封面图修改

只能选取ckeditor里面的图片

实现代码：

1、ckeditor的渲染及封面图选择

    <script type="text/javascript">

        var oCKeditor;

        $(function () {

            oCKeditor = CKEDITOR.replace('myEditor', { height: '400px', width: '1000px', customConfig: '/Ckeditor测试/NewsManager.js' });

            //点击添加封面图

            $("div.article-cover-add").on("click", function (e) {

                //是否禁用弹出框的确定按钮 false默认不禁用

                var disabled = false;

                //获取CKEDITOR里面所有的图片

                var $wrapper_picture = $('<div class="wrapper-cover-picture"></div>');

                var $Ckeditor_image = $(CKEDITOR.instances.myEditor.getData()).find("img");

                if ($Ckeditor_image && $Ckeditor_image.length > 0) {

                    $Ckeditor_image.each(function (index, item) {

                        var $item = $(item);

                        $wrapper_picture.append('\

                        <div class="img-item">\

                            <img width="120" height="120" src="' + $item.attr("src") + '" alt="' + $item.attr("alt") + '"/>\

                        </div>');

                    });

                } else {

                    var disabled = true;//正文中不包含图片,禁用弹出框的确定按钮

                    $wrapper_picture.append('\

                        <p style="text-align:center;color:red;font-size: 30px;">正文中不包含图片，请先上传图片!</p>');

                }

                var easyui_dialog_content = $("<div></div>").append($wrapper_picture).html();

                //用Easy UI弹出框

                $("<div/>").dialog({

                    id: "AddCoverImageIframe",

                    content: easyui_dialog_content,

                    title: "添加封面图",

                    iconCls: 'icon-add',

                    height: 450,

                    width: 770,

                    modal: true,

                    buttons: [{

                        text: '确定',

                        disabled: disabled,

                        handler: function () {

                            //当前选择的image

                            var $image = $("div.img-item.checked img");

                            if ($image == undefined || $image.length <= 0) {

                                $.messager.alert("警告", "封面图不能为空，请选择封面图！")

                                return false;

                            }

                            $(".article-cover-images div.article-cover-add").html('<img width="142" height="120" src="' + $image.attr("src") + '" alt="' + $image.attr("alt") + '"/>');

                            //去掉＋号 before和after样式

                            $(".article-cover-images div.article-cover-add").append('<style>div.article-cover-add::before{display:none}</style>')

                            .append('<style>div.article-cover-add::after{display:none}</style>')

                            $("#AddCoverImageIframe").dialog('destroy'); //销毁dialog对象

                        }

                    }, {

                        text: '取消',

                        handler: function () {

                            $("#AddCoverImageIframe").dialog('destroy'); //销毁dialog对象

                        }

                    }],

                    onOpen: function () {//打开后触发

                        //选择图片(只能选择单张)

                        var $image_containers = $("div.img-item");

                        $image_containers.on("click", function (e) {

                            $image_containers.removeClass("checked");

                            $(this).addClass("checked");

                        });

                    },

                    onClose: function () {

                        $("#AddCoverImageIframe").dialog('destroy'); //销毁dialog对象

                    }

                });

            });

        });

    </script>

2、配置ckeditor显示出对应新添加的插件

CKEDITOR.editorConfig = function (config) {

    config.extraPlugins = "UploadMultipleImage";   //增加了我们的自定义插件

    config.enterMode = CKEDITOR.ENTER_P;

    config.removeDialogTabs = 'image:advanced;link:advanced';

    config.filebrowserUploadUrl = '/ckeditor/net/imageUp.ashx?func=newslist';

    config.removeDialogTabs = 'image:advanced;image:Link';

    config.allowedContent = true;

    config.toolbarGroups = [

        { name: 'custome_plugin', groups: ['UploadMultipleImage'] }, //将自定义插件加入toolbar

         { name: 'styles', groups: ['styles'] },

         { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },

         { name: 'colors', groups: ['colors'] },

         { name: 'paragraph', groups: ['indent', 'blocks', 'align', 'list', 'bidi', 'paragraph'] },

         { name: 'links', groups: ['links'] },

         { name: 'insert', groups: ['insert'] },

         { name: 'clipboard', groups: ['clipboard', 'undo'] },

         { name: 'document', groups: ['document', 'mode', 'doctools'] },

         { name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing'] },

         { name: 'forms', groups: ['forms'] },

         { name: 'tools', groups: ['tools'] },

         { name: 'others', groups: ['others'] },

         { name: 'about', groups: ['about'] }

    ];

    config.removeButtons = 'Styles,Save,Templates,Cut,Find,SelectAll,Scayt,Form,CopyFormatting,Outdent,Blockquote,BidiLtr,Maximize,About,Subscript,Superscript,
RemoveFormat,NewPage,Preview,Print,Copy,Paste,PasteText,PasteFromWord,Replace,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Indent,CreateDiv,
Language,BidiRtl,Flash,Anchor,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,Checkbox';

    config.language = 'en';

};

3、多图片选择弹框及后续实现

(function () {

    //Section 1 : 按下自定义按钮时执行的代码

    var a = {

        exec: function (editor) {

            ///分页获取图片列表

            function getImageList(page_number, page_size) {

                $.ajax({

                    //提交数据的类型 POST GET

                    type: "POST",

                    //提交的网址

                    url: "/handler/uploadHandler.ashx",

                    //提交的数据

                    data: { action: "GetImageList", page_number: page_number, page_size: page_size },

                    //返回数据的格式

                    datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".

                    //成功返回之后调用的函数

                    success: function (data) {

                        data = JSON.parse(data);

                        //图片框

                        var $wrapper_picture = $("#UploadMultipleImageIframe .wrapper-picture");

                        //先清空图片列表

                        $wrapper_picture.empty();

                        //循环添加图片

                        $(data.rows).each(function (index, item) {

                            //判断选择的图片是否再当前分页中，如果是，添加选中样式

                            var class_selected = arr_url_images_selected.indexOf(item.imageUrl) >= 0 ? "checked" : "";

                            $wrapper_picture.append('\

                                <div class="img-item ' + class_selected + '">\

                                    <img width="120" height="120" src="' + item.imageUrl + '"/>\

                                </div>');

                        });

                        //点击图片选中和取消选中

                        $wrapper_picture.find('.img-item').on('click', function () {

                            var $this = $(this);

                            if ($this.hasClass('checked')) {

                                $this.removeClass("checked");

                                //当前选中的图片数量

                                var num_images_selected = Number($('#num_images_selected').text());

                                if (num_images_selected >= 1) {

                                    $('#num_images_selected').text((--num_images_selected));

                                }

                            } else {

                                //当前选中的图片数量

                                var num_images_selected = Number($('#num_images_selected').text());

                                if (num_images_selected < 100) {

                                    $this.addClass("checked");

                                    arr_url_images_selected.push($this.children('img').attr('src'));

                                    $('#num_images_selected').text((++num_images_selected));

                                }

                            }

                        });

                        //分页获取图片并加载

                        $('#images_pagination').pagination({

                            total: data.total,

                            pageSize: 10,

                            showPageList: false,

                            showRefresh: false,

                            //选择新的页面时触发

                            onSelectPage: function (pageNumber, pageSize) {

                                $(this).pagination('loading');

                                getImageList(pageNumber, pageSize);

                                $(this).pagination('loaded');

                            }

                        });

                    },

                    error: function () {

                        //请求出错处理

                    }

                });

            }

            //选中的图片url数组

            var arr_url_images_selected = [];

            var easyui_dialog_content = $('#dialog_upload_multiple_image').html();

            var uploader;

            //用Easy UI弹出图片上传框

            $("<div/>").dialog({

                id: "UploadMultipleImageIframe",

                //href: url,

                content: easyui_dialog_content,//$("#upload_multiple_image_script").html(),

                title: "多图片上传",

                iconCls: 'icon-add',

                height: 450,

                width: 770,

                modal: true,

                buttons: [{

                    text: '确定',

                    handler: function () {

                        $(arr_url_images_selected).each(function (index,item) {

                            CKEDITOR.instances.myEditor.insertHtml('<p style="text-align:center"><img src="' + item + '" width="760" height="507"/></p>');

                        });

                        $("#UploadMultipleImageIframe").dialog('destroy'); //销毁dialog对象

                    }

                }, {

                    text: '取消',

                    handler: function () {

                        $("#UploadMultipleImageIframe").dialog('destroy'); //销毁dialog对象

                    }

                }],

                onOpen: function () {//打开后触发

                    //获取图片列表

                    getImageList(1, 10);

                    // 给本地上传按钮绑定事件

                    uploader = WebUploader.create({

                        pick: { id: ".btn-upload-image" },//article-cover-add btn-chooseimg

                        auto: true,

                        // 只允许选择图片文件。

                        accept: {

                            title: 'Images',

                            extensions: 'gif,jpg,jpeg,bmp,png',

                            mimeTypes: 'image/*'

                        },

                        formData: { action: "UploadMultipleImage" },

                        swf: '/JS/webuploader/Uploader.swf',

                        server: '/handler/uploadHandler.ashx',

                        disableGlobalDnd: true,// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。

                        fileNumLimit: 100,//验证文件总数量, 超出则不允许加入队列

                        fileSizeLimit: 200 * 1024 * 1024,    // 200M 验证文件总大小是否超出限制, 超出则不允许加入队列

                        fileSingleSizeLimit: 50 * 1024 * 1024// 50 M 验证单个文件大小是否超出限制, 超出则不允许加入队列

                    });

                    // 文件上传成功

                    uploader.on('uploadSuccess', function (file, response) {

                        var data = JSON.parse(response._raw);

                        if (data && data.code > 0) {

                            getImageList(1, 10);

                            $('#images_pagination').pagination('refresh', {

                                pageSize: 10,

                                pageNumber:1

                            });

                        }

                    });

                },

                onClose: function () {

                    $("#UploadMultipleImageIframe").dialog('destroy'); //销毁dialog对象

                }

            });

        }

    },

    //Section 2 : 创建自定义按钮、绑定方法

    b = 'UploadMultipleImage';   //注意UploadMultipleImage名字

    CKEDITOR.plugins.add(b, {

        //requires: ["dialog"],

        init: function (editor) {

            editor.addCommand(b, a);

            //注意UploadMultipleImage名字 和 图片路径

            editor.ui.addButton('UploadMultipleImage', {

                label: '多图片上传',

                icon: this.path + 'UploadMultipleImage.jpg',

                command: b

            });

        }

    });

})();

4、图片上传的后台代码

public void ProcessRequest(HttpContext context)

{

    context.Response.ContentType = "text/plain";

    var action = context.Request.Params["action"];

    System.Reflection.MethodInfo methodinfo = this.GetType().GetMethod(action);

    methodinfo.Invoke(this, null);

}

ummary>

/// 上传多张图片

/// </summary>

public void UploadMultipleImage()

{

    int code = ; string msg = string.Empty; string filePath = string.Empty;

    try

    {

        if (HttpContext.Current.Request.Files.Count > )

        {

            //图片保存位置 创建文件夹

            string relativePath = @"/upload/img/" + DateTime.Now.ToString("yyyyMMdd") + "/";//相对路径

            string savePath = context.Server.MapPath(relativePath);//绝对物理路径

            if (!Directory.Exists(savePath)) Directory.CreateDirectory(savePath);

            HttpPostedFile file = HttpContext.Current.Request.Files[];

            //文件后缀

            string fileEx = Path.GetExtension(file.FileName);

            //文件名

            string fileName = String.Format("{0}{1}", DateTime.Now.ToString("yyyyMMddHHmmssfff"), fileEx);

            filePath = relativePath + fileName;

            file.SaveAs(savePath + fileName);

            code = ; msg = "上传成功";

        }

        else

        {

            code = -; msg = "未选择图片";

        }

    }

    catch (Exception ex)

    {

        msg = ex.Message;

    }

    context.Response.Write("{\"code\":\"" + code + "\",\"msg\":\"" + msg + "\",\"filePath\":\"" + filePath + "\"}");

}

5、分页获取图片后台代码

/// <summary>

/// 获取图片列表

/// </summary>

/// <param name="context"></param>

public void GetImageList()

{

    int page_size = , page_number = , total = ;//总记录数

    int.TryParse(context.Request.Params["page_size"], out page_size);//每页显示的记录数

    int.TryParse(context.Request.Params["page_number"], out page_number);//当前第几页

    //要返回第几条到第几条

    int startIndex = (page_number-) * page_size + ,

        endIndex = startIndex + page_size-;

    var rows = new List<dynamic>();

    //读取指定文件夹下所有图片的路径

    var imageUrl = @"G:\zhyue\backup\projects\Test\WebFormTest\upload\img";

    var dirs = Directory.GetFiles(imageUrl, "*.*", SearchOption.AllDirectories).OrderByDescending(s=>s).ToList();

    var length = dirs.Count;

    endIndex = (endIndex > length ? length : endIndex);

    for (int i = startIndex; i <= endIndex; i++)

    {

        if (i < startIndex || i > endIndex) continue;

        rows.Add(new

        {

            imageUrl = dirs[i - ].Replace(@"G:\zhyue\backup\projects\Test\WebFormTest", "").Replace("\\", "/")

        });

    }

    total = length;

    context.Response.Write("{\"rows\":"+ Newtonsoft.Json.JsonConvert.SerializeObject(rows, Newtonsoft.Json.Formatting.Indented) + ",\"total\":\"" + total + "\"}");

}

码农公寓

需求：