zoukankan      html  css  js  c++  java
  • 扩展fckeditor的上传图片和上传文件功能!

        一直都用开fckeditor,最近客户要求编辑器里要能上传文件。编辑器里上传的图片要能添加水印功能。
    于是给fckeditor做了一点小修改。以便支持此功能。
        下面是效果图:



     

     因此,要建两个页面。一个是文件上传的页面,一个是图片上传的页面。
    暂且就叫fck_files.aspx。

     前台布局,别忘了引入fck_files.js咯。
    这个JS是自己添加的。
    <table width="97%" class="tdFont" >
            
    <tr>
                
    <td>
                    
    <fieldset><legend>上传文件</legend>
                    
    <table width="97%">
                        
    <tr>
                            
    <td>选择文件:<asp:FileUpload ID="flup" Width="180px" runat="server" /></td>
                            
    <td>
                            
    <asp:TextBox ID="txtType" style="display:none" runat="server"></asp:TextBox>
                            
    <asp:Button ID="btnUpload" runat="server" OnClientClick="javascript:return checkFile();"  Text="上传" OnClick="btnUpload_Click" /></td>
                        
    </tr> 
                    
    </table>
                    
    </fieldset>
                
    </td>
            
    </tr>
            
    <tr>
                
    <td>
                   
    <fieldset><legend>文件列表</legend>
                    
    <table width="97%">
                        
    <tr>
                            
    <td>
                             
    <asp:ListBox ID="lstbxFile" onclick="selectFiles();" style="100%; height:200px"  runat="server"></asp:ListBox>
                            
    </td> 
                        
    </tr>
                        
    <tr>
                                        
    <td> <asp:Button ID="btnDel"  runat="server" OnClientClick="javascript:return delFiles()"   Text="删除文件" OnClick="btnDel_Click" /></td>
                                    
    </tr>
                    
    </table>
                    
    </fieldset>
                
    </td>
            
    </tr>    
            
         
    </table>   
         
    <asp:TextBox ID="txtUrl" style="display:none"  runat="server"></asp:TextBox>  
         
    <asp:TextBox ID="txtFileName" style="display:none"  runat="server"></asp:TextBox>  



    后台程序也很简单。

     //取得所有的文件
    private void GetListFiles()
        
    {
           
            
    string path = "", fname = "";
            path 
    = this.MapPath("http://www.cnblogs.com/UploadFiles/");
          
            DirectoryInfo dir 
    = new DirectoryInfo(path);
            
    if (!dir.Exists) dir.Create();
            FileInfo[] fileList 
    = dir.GetFiles();
            lstbxFile.Items.Clear();
            
    foreach (FileInfo file in fileList)
            
    {
               lstbxFile.Items.Add(
    new ListItem(file.Name, fname + file.Name));
            }



        }

    //上传文件事件代码。
    //我这里是把文件放在UploadFiles文件夹里
     protected void btnUpload_Click(object sender, EventArgs e)
        
    {
            
    if (flup.HasFile)
            
    {
                
    string spath =  this.MapPath("http://www.cnblogs.com/UploadFiles/");            
                
    string sName = flup.FileName;

                
    //目录是否存在
                DirectoryInfo dinfo = new DirectoryInfo(spath);
                
    if (!dinfo.Exists) dinfo.Create();

                
    //存在相同文件名
                FileInfo fExt = new FileInfo(spath + "\\" + sName);
                
    if (fExt.Exists)
                
    {
                    Random radName 
    = new Random();
                    sName 
    = sName.Substring(0, sName.LastIndexOf('.')) + radName.Next(099999+ "." + sName.Substring(sName.LastIndexOf('.'+ 1);
                    Response.Write(
    "<script>window.alert('出现相同的文件名,文件名称已改为:\"" + sName + "\"')</script>");
                }
                           
                flup.SaveAs(spath 
    + "\\" + sName);                                
                GetListFiles();             
            }

        }


    找到fckeditorcode_ie_2.jsfckcommands.js文件,将期页面路径修改为新添加的aspx文件路径。
    dialog文件夹里,新增一个文件夹命名为fck_files,新增一js文件叫fck_files.js

    var oEditor        = window.parent.InnerDialogLoaded() ;
    var FCK            = oEditor.FCK ;
    var FCKLang        = oEditor.FCKLang ;
    var FCKConfig    = oEditor.FCKConfig ;
    var FCKDebug    = oEditor.FCKDebug ;



    var bPreviewInitialized ;

    window.onload 
    = function()
    {
        window.parent.SetOkButton( 
    true ) ;
    }


    function Ok()
    {
        
    if ( GetE('txtUrl').value.length == 0 )
        
    {        
            alert(
    "请选择文件!");
            
    return false ;
        }


        
    var bHasImage = ( oImage != null ) ;

        oImage 
    = FCK.EditorDocument.createElement( 'a' ) ;
        oImage.href 
    = GetE('txtUrl').value ;
        oImage.target 
    = '_blank';
        oImage.innerHTML 
    = GetE('txtFileName').value ;
        oImage 
    = FCK.InsertElementAndGetIt( oImage ) ;


        
    return true ;
    }


    基本上就差不多了!
  • 相关阅读:
    plsqldeveloper永久注册码
    git常用命令
    淘淘中的一些环境的处理
    Hibernate查询
    markdown的学习
    npm如何发布一个自己的package
    聊聊font-family的那些事
    js 随机生成任意长度的字符串
    CSS世界(张鑫旭)系列学习总结 (四)盒尺寸四大家族
    CSS世界(张鑫旭)系列学习总结 (三)width和height作用的具体细节
  • 原文地址:https://www.cnblogs.com/anson/p/1038026.html
Copyright © 2011-2022 走看看