同一页面，使用多个 KindEditor 和 uploadify

最新推荐文章于 2019-06-25 22:36:05 发布
最新推荐文章于 2019-06-25 22:36:05 发布
阅读量127 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/FH-cnblogs/p/3865544.html
版权 
 <table border="0" cellpadding="0" cellspacing="0" class="panel_tb">
                    <tr>
                        <td class="left1">
                            标题:
                        </td>
                        <td class="left2">
                            <input type="text" runat="server" style="width: 98%" id='txt_PMD_Title' />
                        </td>
                    </tr>
                    <tr>
                        <td class="left1">
                            密码:
                        </td>
                        <td class="left2">
                            <asp:TextBox ID="txt_PM_Password" CssClass="large_box" TextMode="Password" runat="server"
                                Style="width: 90%"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rfv_txt_PM_Password" runat="server" ControlToValidate="txt_PM_Password"
                                ErrorMessage="*"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="left1">
                            关键词:
                        </td>
                        <td class="left2">
                            <input type="text" runat="server" style="width: 70%" id='txt_PMD_Keyword' />
                            <font color="red">(*请用英文逗号分割关键词)</font>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:HiddenField runat="server" ID="hidProdcutModelDetailID" />
                            <asp:HiddenField runat="server" ID="hidDetailTypeID" Value='<%=PMDTypeID%>' />
                            <textarea runat="server" name="txt_PMD_Contents" style="width: 100%; padding: 4px;"
                                rows="15" id='txt_PMD_Contents'></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="left1">
                            附件上传:
                        </td>
                        <td class="left2" colspan="3">
                            <div id="fileQueue">
                            </div>
                            <input type="file" name='uploadify' id='uploadify_<%=PMDTypeID%>' />
                            <input type="button" id='uploadsubmit' name="uploadsubmit" class="uploadify-button"
                                value="上传" onclick='upload(uploadify_<%=PMDTypeID%>)' style="width: 80px; height: 25px;
                                border: none; cursor: pointer;" />
                        </td>
                    </tr>
                    <tr>
                        <td class="left1">
                            已上传附件列表:
                        </td>
                        <td class="left2" colspan="3">
                            <div class="tb_upload">
                                <table id='tb_upload_<%=PMDTypeID%>' cellpadding="0" cellspacing="0">
                                    <tr>
                                        <th>
                                            名称
                                        </th>
                                        <th>
                                            操作
                                        </th>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>

JS

 <script type="text/javascript">

        // <!---------------------富文本编辑器相关------------------------------begin---------->
        KindEditor.ready(function (K) {
            window.onload = function () {
                $.each($("input[id^='uploadify_']"), function (i, row) {
                    var item_uploadify = $(this);

                    var _sametable = item_uploadify.parent().parent().parent();
                    var PMD_Contents = _sametable.find("textarea[id$='txt_PMD_Contents']");
                    editor3 = K.create(PMD_Contents);
                    init_uploadify(item_uploadify);
                });
            }
        });

        // <!---------------------附件上传相关------------------------------begin---------->
        var _InfoID = '<%=ParentInfoID%>';
        var _UserID = $("#hid_CreateUserID").val();
        var _EngineeringType = '<%=EngineeringType%>';

        $.each($("table[id^='tb_upload_']"), function (i, row) {
            var _table = $(this);
            var id_table = _table[0].id;
            var _tb = id_table.substring(id_table.length - (id_table.indexOf("tb_upload_") + 1));

            $.getJSON('/Ajax/uploadify.ashx', { actiontype: 'list', IsMultiple: 1, EngineeringType: _EngineeringType, tb: _tb, id: _InfoID, IsOnlyContract: _IsOnlyContract, r: Math.random() }, function (data) {
                _table.find("tr").remove();
                var edit = '';
                if (data) {
                    _table.append("<tr><th>名称</th> <th>上传日期</th><th>创建人</th>" + (_IsShow ? "<th>操作</th>" : "") + "</tr>");
                    $.each(data, function (i, row) {
                        edit = '<tr><td class="left1"><a href="/SystemManage/UploadFiles/DownLoad.aspx?id=' + row.FileID + '" title="' + row.FileName + '" target="_blank" >' + row.FileName + '</a></td>';
                        edit += ' <td class="left2">' + JSONTOstring(row.UploadTime) + '</td><td class="left2">' + row.UploadUserName + '</td>'
                        if (_IsShow) {
                            edit += '<td class="left2"><span style="color:red">&nbsp;<a href="javascript:;" οnclick="return delInfo(\'' + row.FileID + '\',\'' + row.FileType + '\')" >删除</a>&nbsp;</span></td></tr>';
                        }
                        edit += '</tr>';
                        _table.append(edit);
                    });
                }
            });
        });

        //确定保存
        function showMessage(message, isRefresh) {
            if (isRefresh) {
                art.dialog.tips(message, 2).lock();
                var win = art.dialog.open.origin; //来源页面
                if (win) { art.dialog.close(); win.reRefresh(); }
            }
            else {
                art.dialog.tips(message, 2).lock();
            }
        }

       
    </script>

MultipleUploadify.js

var _IsShow = true; //是否显示操作
var _IsContract = false; //是否上传合同
var _IsOnlyContract = false; //是否仅显示合同
var _IsFirstUpload = false; //是否第一次上传
var _tablelistid = ""; //对应表格ID
var _tb = ""; //对应附件类型

$(document).ready(function () {
    //清除cookies
    $.post('/Ajax/uploadify.ashx', { actiontype: 'clearcookies' });
});

//附件上传初始化
//window.onload = function () {

function init_uploadify(item_uploadify) {
    item_uploadify.uploadify({
        'swf': '/Scripts/uploadify/uploadify.swf?var=' + (new Date()).getTime(),
        'uploader': '/Ajax/uploadify.ashx',
        'debug': false,
        'queueSizeLimit ': 5,
        'auto': false, //选中文件后，自动上传
        'multi': true, //允许上传多个文件
        'fileTypeExts': '*',
        'fileSizeLimit': '100MB',
        'buttonText': '选择',
        'method': 'get',
        'progressData': 'percentage',
        'width': 127,
        'height': 30,
        'onUploadSuccess': function (file, data, response) {
            if (data && parseInt(data) > 0) {
                $.post('/Ajax/uploadify.ashx', { actiontype: 'filecookies', id: data }, function (data) {
                    _IsFirstUpload = true;
                    MultipleFilelist();
                    art.dialog.tips('上传成功');

                }); //更新cookies
            }
            else if (_InfoID && data == "True") {
                _IsFirstUpload = true;
                MultipleFilelist();
                art.dialog.tips('上传成功', 2);

            }
            else {
                art.dialog.tips('上传失败', 2);
            }
        },
        'onUploadError': function (file, errorCode, errorMsg) {
            art.dialog.tips(errorMsg, 3);
        }

    });
}
//}





//上传附件
function upload(id_uploadify) {
    var item_uploadify = $(id_uploadify);

    var _sametable = item_uploadify.parent().parent().parent();
    _tablelistid = _sametable.find("table[id^='tb_upload_']");
    var id_table = _tablelistid[0].id;
    _tb = id_table.substring(id_table.length - (id_table.indexOf("tb_upload_") + 1));

    if (_InfoID) {
        $(item_uploadify).uploadify("settings", 'uploader', '/Ajax/uploadify.ashx?actiontype=MultipleAddFileByID&EngineeringType=' + _EngineeringType + '&tb=' + _tb + '&id=' + _InfoID + '&UserID=' + _UserID);
    }
    else {
        $(item_uploadify).uploadify("settings", 'uploader', '/Ajax/uploadify.ashx?actiontype=addfile&UserID=' + _UserID + '&EngineeringType=' + _EngineeringType + '&tb=' + _tb);
    }
    $(item_uploadify).uploadify("upload", "*");
}
//附件列表
function MultipleFilelist() {


    if (_InfoID != '0')
        _IsFirstUpload = false;
    if (!_IsFirstUpload) {


        $.getJSON('/Ajax/uploadify.ashx', { actiontype: 'list', IsMultiple: 1, EngineeringType: _EngineeringType, tb: _tb, id: _InfoID, IsOnlyContract: _IsOnlyContract, r: Math.random() }, function (data) {
            _tablelistid.find("tr").remove();
            var edit = '';
            if (data) {
                _tablelistid.append("<tr><th>名称</th> <th>上传日期</th><th>创建人</th>" + (_IsShow ? "<th>操作</th>" : "") + "</tr>");
                $.each(data, function (i, row) {
                    edit = '<tr><td class="left1"><a href="/SystemManage/UploadFiles/DownLoad.aspx?id=' + row.FileID + '" title="' + row.FileName + '" target="_blank" >' + row.FileName + '</a></td>';
                    edit += ' <td class="left2">' + JSONTOstring(row.UploadTime) + '</td><td class="left2">' + row.UploadUserName + '</td>'
                    if (_IsShow) {
                        edit += '<td class="left2"><span style="color:red">&nbsp;<a href="javascript:;" οnclick="return delInfo(\'' + row.FileID + '\',\'' + row.SrcName + '\')" >删除</a>&nbsp;</span></td></tr>';
                    }
                    edit += '</tr>';
                    _tablelistid.append(edit);
                });
            }
        });
    }
    else {
        $.getJSON('/Ajax/uploadify.ashx', { actiontype: 'listbycookies', tb: _tb, r: Math.random() }, function (data) {
            _tablelistid.find("tr").remove();
            var edit = '';
            if (data) {
                _tablelistid.append("<tr><th>名称</th> <th>上传日期</th><th>创建人</th>" + (_IsShow ? "<th>操作</th>" : "") + "</tr>");
                $.each(data, function (i, row) {
                    edit = '<tr><td class="left1"><a href="/SystemManage/UploadFiles/DownLoad.aspx?id=' + row.FileID + '" title="' + row.FileName + '" target="_blank" >' + row.FileName + '</a></td>'
                        + ' <td class="left2">' + JSONTOstring(row.UploadTime) + '</td><td class="left2">' + row.UploadUserName + '</td>'
                                + '<td class="left2"><span style="color:red">&nbsp;<a href="javascript:;" οnclick="return delInfo(\'' + row.FileID + '\',\'' + row.FileType + '\')" >删除</a>&nbsp;</span></td></tr>';
                    _tablelistid.append(edit);
                });
            }
        });
    }
}


//删除附件(获取要删除的表格刷新)
function delInfo(idlist, FileType) {
    _tablelistid = $("#tb_upload_" + FileType + "");
    art.dialog.confirm('您确认删除操作？', function () {
        $.post('/Ajax/uploadify.ashx', { actiontype: 'delete', id: idlist },
                        function (msg) {
                            if (msg == "True") { art.dialog.tips('删除成功'); }
                            else { art.dialog.tips('删除失败').lock(); }
                            _tb = FileType;
                            MultipleFilelist();
                        }, "text");
    }, function () {
        art.dialog.tips('您取消了操作');
    });
}
//转化时间
function JSONTOstring(jsondate) {
    if (!jsondate) return "";
    var date = new Date(parseInt(jsondate.replace("/Date(", "").replace(")/", ""), 10));
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    return year + "-" + month + "-" + day;
}

后台处理ashx

 //要绑定的信息id
                    string tb = context.Request["tb"];
                    if (string.IsNullOrEmpty(tb)) return;
                    //要绑定的信息id
                    string id = context.Request["id"];
                    if (string.IsNullOrEmpty(id)) return;
                    //附件
                    HttpPostedFile file = context.Request.Files["Filedata"];
                    if (file == null) { return; }
                    //操作人id
                    int UserID = Convert.ToInt32(context.Request["UserID"]);
                    if (UserID < 1) { return; }
                    ///工程资料类型
                    string EngineeringType = context.Request["EngineeringType"];
                    context.Response.Charset = "utf-8";
                    context.Response.Write(AddFile(file, UserID, id, tb, EngineeringType, true));
 /// <summary>
        /// 信息编辑时，上传附件
        /// </summary>
        /// <param name="file"></param>
        /// <param name="UserID"></param>
        /// <param name="infoid"></param>
        /// <param name="tb"></param>
        /// <param name="srcname"></param>
        /// <param name="IsMultiple">是否页面内多上传控件</param>
        /// <returns></returns>
        private int AddFile(HttpPostedFile file, int UserID, string infoid, string tb, string srcname, bool IsMultiple)
        {
            if (file != null && !string.IsNullOrEmpty(file.FileName))
            {
                //上传图片
                string FilePath = "/UploadFiles/";
                string strFileName = System.IO.Path.GetFileName(file.FileName);
                string strNewName = bell0769.Common.StringPlus.GetKEY("File_");
                string FileName = strFileName.Substring(0, strFileName.IndexOf(".")) + "";
                string FileType = System.IO.Path.GetExtension(strFileName);
                Double FileSize = file.ContentLength / 1024;
                string strFileSize = string.Empty;
                if (FileSize > 1024)
                {
                    strFileSize = (FileSize / 1024).ToString() + "MB";
                }
                else
                {
                    strFileSize = FileSize.ToString() + "KB";
                }
                string strFileSavePath = FilePath + strNewName + FileType;
                string strFilePathAndName = System.Web.HttpContext.Current.Server.MapPath(strFileSavePath);
                while (System.IO.File.Exists(strFilePathAndName))
                {
                    strNewName = bell0769.Common.StringPlus.GetKEY("File_");
                    strFileSavePath = FilePath + strNewName + FileType;
                    strFilePathAndName = System.Web.HttpContext.Current.Server.MapPath(strFileSavePath);
                }

                string strFile = System.Web.HttpContext.Current.Server.MapPath(FilePath + strNewName + FileType);//原图
                file.SaveAs(strFile);

                //添加数据
                Bms_UploadFilesModel info = new Bms_UploadFilesModel();
                info.FileExt = FileType;
                info.FileName = strFileName;
                info.FilePath = strFileSavePath;
                info.FileSize = strFileSize;
                info.FileCode = strNewName;
                info.UploadUser = UserID;
                info.UploadUserName = new Bms_UserInfoBLL().Get(UserID).UserName;
                info.DataKey = infoid;
                ///上传附件类型
                if (!IsMultiple)
                    info.FileType = CommonBLL.GetOperateInfoID(tb);
                else
                    info.FileType = int.Parse(string.IsNullOrEmpty(tb) ? "-97" : tb);
                info.SrcName = srcname;//(附件、合同) 或（工程资料类型）
                int id = new Bms_UploadFilesBLL().Create(info, UserID);
                return id;

            }
            else
            {
                return 0;
            }
        }

转载于:https://www.cnblogs.com/FH-cnblogs/p/3865544.html

weixin_30762087
关注
在一个页面使用多个 kindeditor编辑器
ougexingfuba的博客
06-08 5635
最开始在页面上使用一个 kindeditor编辑器，没有遇到什么问题。后面需要使用2个的时候。首先我的代码是这样写的； 简介 {pigcms{$news.introduction} 内容 {pigcms{$news.content} JS代码如下： KindEditor.ready(functi
vue 一个页面使用多个wangEditor
sunlizhen的专栏
12-13 5701
1，vue中安装wangEditor 使用的npm安装 npm install wangeditor --save 2.直接上代码： 组件： <template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar"> </div> ...
kindeditor-4.1.10文本编辑器多个绑定
chiyu4415的博客
04-22 126
如题，就是在同一个页面使用多个kindeditor编辑器 具体实现见下面—— HTML： ... <link rel="stylesheet" href="/Scripts/kindeditor-4.1.10/themes/default/default.css" /&gt...
如何在一个页面添加多个不同的kindeditor编辑器
weixin_30344995的博客
12-16 195
kindeditor官方下载地址：http://kindeditor.net/down.php 　 （入门必看）kindeditor官方文档：http://kindeditor.net/doc.php 　　 （入门必看）Kindeditor编辑器初始化参数文档：http://kindeditor.net/docs/option.html 　　或许我们一个页面有需要用到多个...
在线HTML编辑器 KindEditor 多个编…
php菜鸟技术天地
06-02 460
在线HTML编辑器 KindEditor 同一个网页同时插入多个编辑器 部分   <script charset="utf-8" src="../kindeditor/kindeditor-min.js">   <script charset="utf-8" src="../kindeditor/lang/zh_CN.js">       KindEditor.ready(function(
单独调用kindeditor的多图上传组件实现多图上传
weixin_30872867的博客
10-08 888
本例是单独调用kindeditor多图上传的组件来进行多图上传，兼容性你懂得！ 官方示例地址：http://kindeditor.net/ke4/examples/multi-image-dialog.html Html JS 转载于:https://www.cnblogs.com/baiyunchen/p/4010507.html...
动态创建多个KindEditor编辑器
tyasd
07-14 2723
首先写这篇文章是为了以后自己使用，其中的逻辑方式可能不是最好的，因本人也是菜鸟一只。言归正传。 创建多个编辑器是因为有个项目类似于微博的评论的功能，一个页面会有多个文章或广播就需要多个评论，根据加载的文章数来动态创建多个编辑器了，我的方式如下： var K = window.KindEditor;//编辑器全局变量 var kinditerArry = new Array(4);
kindeditor-4.1.11多图上传按钮无法出现且无法点击flash无法上传
05-06
由于Adobe公司在2020年底已经停止对Flash Player的支持，这个问题对于依赖Flash的KindEditor来说，确实是一个亟待解决的痛点。 本文将详细讲解如何解决KindEditor在没有Flash支持环境下的多图上传问题，并提供一个...
kindEditor使用记录
最新发布
04-10
在使用KindEditor的过程中，我们需要了解以下几个核心知识点： 1. **安装与引入**：首先，你需要从官方仓库或第三方资源站点下载KindEditor的压缩包。解压后，将包含的JavaScript和CSS文件引入到你的HTML页面中。...
Django添加KindEditor富文本编辑器的使用
09-20
这段代码会创建一个KindEditor实例，其中`#id_content`是页面中textarea元素的ID。 #### 4. 在admin.py中添加classMedia 在Django的`admin.py`文件中，为了让KindEditor能够在管理后台中正常工作，需要添加...
ASP 简单结合kindeditor实现多图上传，可以自由移动图片顺序，删除
XYCMS博客家园
10-10 845
 ASP 简单结合kindeditor实现多图上传，可以自由移动图片顺序，删除 是实现这样功能需要结合JavaScript或者jQuery技术 结果努力，终于做好效果图如下： 方法： 就是动态赋值input，利用隐藏字段去判断顺序。 简单的思路。如需交流可以联系Q364500483交流
同一页面多次使用kindEditor的上传文件——兼容大部分浏览器
chengjiangbo的专栏
12-10 1741
shopPersonalOrshopCompany.js: KindEditor.ready(function(K) {    array = new Array("taxpayerMaterialId","idMaterialId","taxCertificateMaterialId","ktpMaterialId","businessLicenseMaterialId"); for (
asp.net中kindeditor4.1.7用法及配置图片上传，图片批量上传(VS2010)
eNet
10-28 6443
从官网下载kindeditor4.1.7：
uploadify插件实现多个图片上传并预览
weixin_30740581的博客
11-19 114
uploadify插件实现多个图片上传并预览 转载于:https://www.cnblogs.com/zhujiabin/p/4978872.html
解决kindeditor在使用验证插件下点两次才能提交
weixin_34388207的博客
06-25 253
在KINDEDITOR文件夹下面找到kindeditor.js,打开这个JS后找到syncType属性，把默认值form改成auto就可以了” 转载于:https://www.cnblogs.com/majinyu/archive/2013/04/26/3044743.html...
KindEditor、同时绑定多个富文本编辑器
weixin_30609287的博客
11-17 353
　　　　　　　var options = { filterMode : false, allowImageUpload : true, items : [ 'source', '|', 'undo', 'redo', '|', '...
kindeditor4.1.8以前版本批量上传图片与swfupload冲突
子晓聊技术
01-02 3157
kindeditor使用的4.1.5版本，与自带的swfupload的冲突，解决方法：修改kindeditor的SWFUPLOAD的命令空间为其他的，自己为了图简单，才发现kindeditor4.1.8已经解决这个问题，下载kindeditor4.10替换直接解决问题
多附件上传控件uploadify的使用心得
weixin_30929195的博客
01-15 92
最近开发项目时使用到了多附件上传控件。比较普遍使用的多附件上传控件一般都是JS+FLASH，还有支持JS+HTML，JS+Silverlight等等，不过都没有js+FLASH的普及，毕竟flashplayer现在基本上是个浏览器，上过网的都会安装，所以使用JS+FLASH插件对客户端的要求稍微简单些。 因为以往使用过uploadify控件，所以做该项目时第一个考虑的就是它。 官网地址为htt...
KindEditor多图上传插件修复及使用教程
资源摘要信息:"KindEditor多图上传flash失效插件" ... - 开发者若需要更深入地了解KindEditor多图上传功能的实现，应当查阅相关的开发者文档、源码、社区讨论以及参与开源项目来获取更具体的开发指南和技术支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值