fckeditor给文件(包括图片)及文件夹增加删除功能

工作需要需要fck编辑器的服务器浏览加个图片删除的功能,我们利用ajax
php实现的有需要的朋友可以参考下。
在fckeditoreditorfilemanagerbrowserdefault文件夹中找到frmresourceslist.html文件,修改代码如下
oListManager.GetFileRowHtml找到这里,下面代码替换原来的代码 复制代码 代码如下: oListManager.GetFileRowHtml
= function(fileName, fileUrl, fileSize) { // Build the link to view the
folder. var sLink = ‘a href=”#” mce_href=”#” onclick=”OpenFile(” +
ProtectPath(fileUrl) + ”);return false;”选择/a’; // Get the file icon.
var sIcon = oIcons.GetIcon(fileName); return ‘div img alt=”” src=”‘ +
fileUrl + ‘” src2=”images/icons/’ + sIcon + ‘.gif” height=”100″
border=”0″p’ + sLink + ‘ a href=”#” mce_href=”#”
onclick=”deleteFile(” + ProtectPath(fileUrl) + ”);” mce_ 删除
/a/p/div’ } 在加个 script type=”text/javascript”
src=”/js/ajaxdel.js”/script ajaxdel.js文件 复制代码 代码如下:
//********************************
图片删除功能
******************************************
var req; //定义变量,用来创建xml对象 //产生不重复的随机数 var rn =
Math.ceil(Math.random() * 1000000); var rnch = rn; function rndnum() {
while (rn == rnch) rn = Math.ceil(Math.random() * 1000000); rnch = rn;
return rn; } // 删除文件,Ajax开始 function deleteFile(file) { var url =
“/ajaxpic.php?filePath=” + escape(file) + “&UD=” + rndnum();
//要请求的服务端地址 if (window.XMLHttpRequest)
//非IE浏览器及IE7(7.0及以上版本),用xml对象创建 { req = new
XMLHttpRequest(); } else if (window.ActiveXObject)
//IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
{ req = new ActiveXObject(“Microsoft.XMLHttp”); } if (req) //成功创建xml
{ req.open(“GET”, url, true);
//与服务端建立连接(请求方式post或get,地址,true表示异步)
req.onreadystatechange = callback; //指定回调函数 req.send(null);
//发送请求 } } function callback() { if(req.responseText ==1 ) {
alert(‘删除成功!’); Refresh(); } else { alert(‘删除失败!’); }//刷新一下
} ajaxpic.php文件 保存成ajaxpic.php 复制代码 代码如下: ? $root = dirname(
__FILE__ ); $filePath = isset( $_GET[‘filePath’] )
?$_GET[‘filePath’]:”; if( unlink( $root.$filePath) ) { echo ‘1’; }
else { echo ‘0’; } ?

方法一:不修改源码

php 文件上传代码,限制jpg文件
<?php
    /* 图片上传类 www.lost63.com原创代码
仅限JPG格式图片 */
    class uploadFile
    {
        var $inputName; //input名称
        var $fileName; //文件命名
        var $fileProperty; //文件属性
        var $fileSize=2097152; //文件大小限制,2M
        var $filePath=”upload/”; //文件存储路径
        function uploadFile($inputName){
            $this->inputName=$inputName;
            $this->getName(); //取得新的名称
            $this->fileSave();
        }
        //随机名称
        private function getName(){
           
$this->fileName=date(“YmdHms”).rand(0,9).$this->getProperty();
        }
        //文件属性,返回后辍名
        private function getProperty(){
           
if($_FILES[$this->inputName][“type”]==”image/pjpeg”||$_FILES[$this->inputName][“type”]==”image/jpeg”){
                return “.jpg”;
            }else{
                exit(“文件格式不对”);
            }
        }
        //文件存储
        private function fileSave(){
           
if($_FILES[$this->inputName][“size”]>$this->fileSize){
                exit(“文件太大,最大限制为”.$this->fileSize.”字节”);
            }
            if(!file_exists($this->filePath)){
                mkdir($this->filePath);
//如果文件存储目录不存在,则建立;
            }
           
move_uploaded_file($_FILES[$this->inputName][“tmp_name”],
                $this->filePath.$this->fileName);
        }
    }
    if($_GET[‘action’]==”fileSave”){
        $f=new uploadFile(“file”);
        echo ‘<input name=”textfield” type=”text” size=”30″
value=”‘.$f->filePath.$f->fileName.'” /> 上传成功! <a
href=”‘.$f->filePath.$f->fileName.'”>浏览</a>’;
    }else{
        echo ‘<form action=”?action=fileSave” method=”post”
enctype=”multipart/form-data” name=”form1″ id=”form1″>
              <input type=”file” name=”file” size=”30″ />
              <input type=”submit” name=”Submit” value=”提交” />
            </form>’;
    }
?>

1、在fckeditoreditorfilemanagerbrowserdefault文件夹中找到frmresourceslist.html文件,将

oListManager.GetFileRowHtml和oListManager.GetFolderRowHtml代码修改如下:

        //在文件夹后放置“删除”
        oListManager.GetFolderRowHtml = function (folderName, folderPath, folderUrl) {
            // Build the link to view the folder.
            var sLink = ‘<a href=”#” onclick=”OpenFolder(” + ProtectPath(folderPath) + ”);return false;”>’;
            return ‘<tr>’ +
            ‘<td width=”16″>’ +
                sLink +
                ‘<img alt=”” src=”images/Folder.gif” width=”16″ height=”16″ border=”0″></a>’ +
            ‘</td><td nowrap colspan=”2″> ‘ +
                sLink +
                folderName +
                ‘</a>’ +
        ‘</td><td align=”right”><a href=”#” onclick=”DeleteFolder(**” +
                folderName + ”,” +
                ProtectPath(folderUrl) +
        ”**);return false;”>删除</a></td></tr>’;
        }

        //在文件后放置“删除”
        oListManager.GetFileRowHtml = function (fileName, fileUrl, fileSize) {
            var sLink = ‘<a href=”#” onclick=”OpenFile(” + ProtectPath(fileUrl) + ”);   return false;”>’;
            var sIcon = oIcons.GetIcon(fileName);
            return ‘<tr>’ + ‘<td width=”16″>’ + sLink + ‘<img alt=”” src=”images/icons/’
            + sIcon + ‘.gif” width=”16″ height=”16″  border=”0″> </a>’
            + ‘</td><td> ‘ + sLink + fileName
            + ‘</a> <a href=”#” onclick=”deleteFile(**” +
                fileName + ”,” + ProtectPath(fileUrl)
            + ”);” style=”color: #FF9933;”> 删除 </a>’ +** ‘</td><td align=”right” nowrap> ‘
            + fileSize + ‘ KB’ + ‘</td></tr>’;
        }

 

2、在该文件的js中增加如下代码:

        //产生不重复的随机数
        var rn = Math.ceil(Math.random() * 1000000);
        var rnch = rn;
        function rndnum() {
            while (rn == rnch) rn = Math.ceil(Math.random() * 1000000);
            rnch = rn;
            return rn;
        }
        // 删除文件
        function deleteFile(fileName, file) {
            var xml = new ActiveXObject(“MSXML2.XMLHTTP”);
            if (confirm(‘您确定要删除“’ + fileName + ‘”吗?’)) {
                xml.open(“get”, “FCKdel_file.aspx?filePath=” + file + “&UD=” +
 rndnum(), false);
                xml.send();
                Refresh();
                switch (xml.responseText.substring(0, 1)) {
                    case “1”: alert(“文件删除成功!”);
                        break;
                    case “0”: alert(“文件删除失败!请检查文件是否存在!”);
                        break;
                    case “2”: alert(“您不是系统管理员,无权进行操作!”);
                        break;
                    default: alert(“未知错误!”);
                        break;
                }
            }
        }
        //删除文件夹
        function DeleteFolder(folderName, folderPath) {
            var xml = new ActiveXObject(“MSXML2.XMLHTTP”);
            if (confirm(‘您确定要删除文件夹“’ + folderName + ‘”和里面的所有文件吗?’)) {
                xml.open(“get”, “FCKDel_folder.aspx?folderPath=” + 
escape(folderPath + folderName) + “&UD=” + rndnum(), false);
                xml.send();
                Refresh();
                switch (xml.responseText.substring(0, 1)) {
                    case “1”: alert(“文件夹删除成功!”);
                        break;
                    case “0”: alert(“文件夹删除失败!请检查文件是否存在!”);
                        break;
                    case “2”: alert(“您不是系统管理员,无权进行操作!”);
                        break;
                    default: alert(“未知错误!”);
                        break;
                }
            }

       }

 

 继续修改文件“frmresourceslist.htm”,找到 GetFoldersAndFilesCallBack
函数中的下面这行,增加红色部分的代码:

 

oHtml.Append( oListManager.GetFolderRowHtml( sFolderName, sCurrentFolderPath + sFolderName + “/”, sCurrentFolderUrl ) );

3、增加文件

  在同一个目录(指frmresourceslist.html所在目录)中增加FCKdel_file.aspx,用于删除文件。代码如下:

<%@ Page Language=”C#” %>

<%    
    if (Request.QueryString[“UD”] != null)
    {
        try
        {
            string file = Request.QueryString[“filePath”].Trim();
            string filePath = Server.MapPath(file);
            if (System.IO.File.Exists(filePath))
            {
                System.IO.File.Delete(filePath);
                Response.Write(“1”);
            }
            else
            {
                Response.Write(“0”);
            }
        }
        catch
        {
            Response.Write(“0”);
        }
    }
    else Response.Write(“2”);
%>

 

 

  在同一个目录(指frmresourceslist.html所在目录)中增加FCKDel_folder.aspx,用于删除文件夹。代码如下:

<%@ Page Language=”C#” %>

<%    
    if (Request.QueryString[“UD”] != null)
    {
        try
        {
            string file = HttpUtility.UrlDecode(Request.QueryString[“folderPath”].Trim());
            string filePath = Server.MapPath(file);
            if (System.IO.Directory.Exists(filePath))
            {
                System.IO.Directory.Delete(filePath, true);
                Response.Write(“1”);
            }
            else
            {
                Response.Write(“0”);
            }
        }
        catch
        {
            Response.Write(“0”);
        }
    }
    else Response.Write(“2”);
%>

 完成,测试,成功。

 

方法二:修改源码(本文所针对版本:FCKeditor: 2.6.4,FCKeditor.Net:
2.6.3。)

首先下载FCKeditor控件的源码——FCKeditor.Net。

 

  1. 打开项目 FCKeditor.Net,打开文件“FileBrowser/Connector.cs”,为 class
    Connector 增加如下两个成员函数:

//删除文件
        private void DelFile(XmlNode connectorNode, string resourceType, string currentFolder)
        {
            HttpContext hc = HttpContext.Current;
            string file = hc.Server.MapPath(HttpUtility.UrlDecode(hc.Request[“FileUrl”], System.Text.Encoding.UTF8));
            if (System.IO.File.Exists(file))
                System.IO.File.Delete(file);
            else
                hc.Response.Write(@”<error number=””1″” originaldescription=””unable to locate file””>”);
        }

        //删除文件夹
        private void DelFolder(XmlNode connectorNode, string resourceType, string currentFolder)
        {
            HttpContext hc = HttpContext.Current;
            string folder = hc.Server.MapPath(HttpUtility.UrlDecode(hc.Request[“FolderName”], System.Text.Encoding.UTF8));
            if (System.IO.Directory.Exists(folder))
                System.IO.Directory.Delete(folder, true);
            else
                hc.Response.Write(@”<error number=””2″” originaldescription=””unable to locate folder””>”);
        }

 

  1. 在文件“Connector.cs”中找到 OnLoad 函数,在 switch
    部分增加以下红色代码:

            // Execute the required command.
            switch (sCommand)
            {
                case “GetFolders”:
                    this.GetFolders(oConnectorNode, sResourceType, sCurrentFolder);
                    break;
                case “GetFoldersAndFiles”:
                    this.GetFolders(oConnectorNode, sResourceType, sCurrentFolder);
                    this.GetFiles(oConnectorNode, sResourceType, sCurrentFolder);
                    break;
                **case “CreateFolder”:
                    this.CreateFolder(oConnectorNode, sResourceType, sCurrentFolder);
                    break;
                case “DelFile”:
                    this.DelFile(oConnectorNode, sResourceType, sCurrentFolder);
                    break;
                case “DelFolder”:
                    this.DelFolder(oConnectorNode, sResourceType, sCurrentFolder);
                    break**;
                default:
                    XmlResponseHandler.SendError(Response, 1, “Command is not allowed”);
                    break;
            }

 

  1. 编译 FCKeditor.net 并关闭该项目。将生成的 FredCK.FCKeditorV2.dll
    拷贝出来用于Web项目的引用。

  2. 建立 C# 测试项目,并在其中部署 FCKeditor 2.6.4(使用第 3 步生成的
    FredCK.FCKeditorV2.dll)。

5.
打开“fckeditor/editor/filemanager/browser/default/frmresourceslist.htm”,修改以下两个函数

 

oListManager.GetFolderRowHtml = function( folderName, folderPath, folderUrl )
{
  // Build the link to view the folder.
  var sLink = ‘<a href=”#” onclick=”OpenFolder(” + ProtectPath(folderPath) + 
”);return false;”>’;

  return ‘<tr>’ +
    ‘<td width=”16″>’ +
      sLink +
      ‘<img alt=”” src=”images/Folder.gif” width=”16″ height=”16″ border=”0″></a>’ +
    ‘</td><td nowrap colspan=”2″> ‘ +
      sLink +
      folderName +
      ‘</a>’ +
    ‘</td><td align=”right”><a href=”#” onclick=”DelFolder(**”+folderName+’
‘,”+ ProtectPath(folderUrl) + ”**);return false;”>删除</a></td></tr>’;
}

oListManager.GetFileRowHtml = function( fileName, fileUrl, fileSize )
{
  // Build the link to view the folder.
  var sLink = ‘<a href=”#” onclick=”OpenFile(” + ProtectPath(fileUrl) + 
”);return false;”>’ ;

  // Get the file icon.
  var sIcon = oIcons.GetIcon( fileName ) ;

  return ‘<tr>’ +
    ‘<td width=”16″>’ +
      sLink +
      ‘<img alt=”” src=”images/icons/’ + sIcon + ‘.gif” width=”16″ height=”16″ border=”0″></a>’ +
    ‘</td><td> ‘ +
      sLink +
      fileName +
      ‘</a>’ +
    ‘</td><td align=”right” nowrap> ‘ +
      fileSize +
      ‘ KB’ +
    ‘</td><td align=”right”><a href=”#” onclick=”DelFile(**”+fileName+”,” + 
ProtectPath(fileUrl) + ”**);return false;”>删除</a></td></tr>’;
}

 

 

  1. 继续修改文件“frmresourceslist.htm”,在 OpenFile
    函数后面增加以下两个函数:

function DelFile( fileName, fileUrl )
{
  if (confirm(‘您确定要删除文件“’ + fileName + ‘”吗?’))
    oConnector.SendCommand(“DelFile”, “FileUrl=” + escape(fileUrl), Refresh);
}

function DelFolder( folderName, folderPath )
{
  if (confirm(‘您确定要删除文件夹“’ + folderName + ‘”和里面的所有文件吗?’))
    oConnector.SendCommand(“DelFolder”, “FolderName=” + escape(folderPath +
folderName), Refresh);
}

 

  1. 继续修改文件“frmresourceslist.htm”,找到 GetFoldersAndFilesCallBack
    函数中的下面这行,增加红色部分的代码:

oHtml.Append( oListManager.GetFolderRowHtml( sFolderName, sCurrentFolderPath + sFolderName + “/”, sCurrentFolderUrl ) );

 

至此,删除功能增加完毕。

 

 

 

 参考文章:

 

 

 

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图