轉： KindEditor 圖片空間文件增長刪除文件、文件夾功能（ASP語言環境）

KindEditor 圖片上傳功能中集成的圖片空間文件管理插件能夠對已上傳圖片進行管理，十分便捷，只是沒有圖片刪除功能，仔細研讀xieliang分享的經驗後，本身動手改造了一下，順便分享給有一樣需求的朋友，做個參考，如下介紹以ASP語言環境爲基礎。

 

1、修改後效果圖：

增改功能說明：

一、增長鼠標移至文件上時顯示【引用】、【刪除】兩個按鈕；

二、修改原【點擊文件直接引用文件】功能爲【點擊引用按鈕引用文件】；

三、移至文件時的原來只提示【文件名稱】，修改成提示【文件路徑及大小】。

 

2、步驟1：修改 default.css 缺省樣式表

一、打開缺省樣式表或本身引用的樣式表（ 原始文檔默認路徑爲：kindeditor路徑\themes\default\default.css ）；

二、修改樣式：.ke-plugin-filemanager-body 、 .ke-plugin-filemanager-body .ke-item 、 .ke-plugin-filemanager-body .ke-photo 爲如下代碼：

dy .ke-photo { border: 1px solid #DDDDDD; background-color:#FFFFFF; padding: 6px; position:relative; }

主要修改說明：

(1) .ke-plugin-filemanager-body 及 .ke-plugin-filemanager-body .ke-photo 增長相對定位屬性：position:relative; 主要實現鼠標移至圖片時，新增的【引用】、【刪除】按鈕能正常定位；

(2) 其餘樣式的 margin 及 padding 調整主要是顯示效果的微調，不影響總體功能。

 

3、步驟2：拷貝按鈕圖片至文件管理插件 filemanager 的圖片目錄 images

將下面的【引用按鈕】、【刪除按鈕】、【打開文件夾按鈕】三個圖片（也能夠自行設計）拷貝至【文件管理插件】的【images】目錄（ 原始文檔默認路徑爲：kindeditor路徑\editor\plugins\filemanager\images\）。

 

4、步驟3：修改文件管理插件 JS 文件： filemanager.js 

一、打開 filemanager.js 文件（ 原始文檔默認路徑爲：kindeditor路徑\editor\plugins\filemanager\filemanager.js ）。

二、將函數 function bindEvent(el, result, data, createFunc) 修改以下：

function bindEvent(el, result, data, createFunc) {
 var fileUrl = K.formatUrl(result.current_url + data.filename, 'absolute'),
  dirPath = encodeURIComponent(result.current_dir_path + data.filename + '/');
 if (data.is_dir) {
  el.children().eq(0).click(function(e) {
   reloadPage(dirPath, orderTypeBox.val(), createFunc); //單擊文件夾
  });
 } else if (data.is_photo) {
  el.children().eq(0).click(function(e) {
   clickFn.call(this, fileUrl, data.filename); //單擊圖片
  });
 } else {
  el.children().eq(0).click(function(e) {
   clickFn.call(this, fileUrl, data.filename); //單擊其餘文件
  });
 }
 elList.push(el);
}

主要修改說明：

將原有的【單擊直接引用文件】、【單擊直接打開文件夾】修改成【單擊引用按鈕引用文件】【單擊打開按鈕打開文件夾】。使用篩選器：el.children().eq(0)

三、將函數 function createView(result) 修改以下：

function createView(result) {
 createCommon(result, createView);
 var fileList = result.file_list;
 for (var i = 0, len = fileList.length; i < len; i++) {
  var data = fileList[i],
   div = K('<div class="ke-inline-block ke-item"></div>');
  bodyDiv.append(div);
  var AltTxt=data.is_dir?"打開文件夾：":"引用文件：",
   AltIco=data.is_dir?"open.png":"quote.png", //區分文件與文件夾引用與打開圖標
   IsDirYN=data.is_dir?"D":"F", //區分文件與文件夾參數傳遞
   CurFileUrl=K.formatUrl(result.current_url+data.filename, 'absolute'),
   QuoteIcon="<img class='QuoteBtn' src='"+imgPath+AltIco+"' Style='width:30px;height:30px;position:absolute;top:30px;right:30px;display:none;' alt='"+AltTxt+CurFileUrl+"' title='"+AltTxt+CurFileUrl+"' />", //定義引用按鈕樣式
   DeleteIcon="<img class='DeleteBtn' src='"+imgPath+"delete.png' Style='width:30px;height:30px;position:absolute;top:-15px;right:-15px;display:none;' alt='刪除："+CurFileUrl+"' title='刪除："+CurFileUrl+"' DeUrl='"+CurFileUrl+"' IsFrd='"+IsDirYN+"' />"; //定義刪除按鈕樣式
  var photoDiv = K('<div class="ke-inline-block ke-photo">'+QuoteIcon+DeleteIcon+'</div>') //圖片DIV
   .mouseover(function(e) {
    K(this).addClass('ke-on');
    K(this).children().eq(0).css('display','block'); //顯示引用按鈕
    K(this).children().eq(1).css('display','block'); //顯示刪除按鈕
   })
   .mouseout(function(e) {
    K(this).removeClass('ke-on');
    K(this).children().eq(0).css('display','none'); //隱藏引用按鈕
    K(this).children().eq(1).css('display','none'); //隱藏刪除按鈕
   });
  div.append(photoDiv);
  var fileUrl = result.current_url + data.filename,
   iconUrl = data.is_dir ? imgPath + 'folder-64.gif' : (data.is_photo ? fileUrl : imgPath + 'file-64.gif'),
   filesiz = data.is_dir ? '' : '  ('+ Math.ceil(data.filesize/1024) + 'KB)'; //文件尺寸
  var img = K('<img src="' + iconUrl + '" width="80" height="80" alt="' + data.filename + filesiz + '" />');
  if (!data.is_dir || data.has_file) {
   photoDiv.css('cursor', 'pointer');
   bindTitle(photoDiv, data);
   bindEvent(photoDiv, result, data, createView);
  } else {
   photoDiv.attr('title', lang.emptyFolder);
  }
  photoDiv.append(img);
  div.append('<div class="ke-name" title="' + data.filename + '">' + data.filename + '</div>'); 
 }
 //增長刪除代碼
 K(".DeleteBtn").click(function(){
  var $this=K(this),
   CrrentDelUrl=$(this).attr("DeUrl");
   CurrentIsDir=$(this).attr("IsFrd");
   if (!confirm("肯定刪除："+CrrentDelUrl+"？")){return false}
   //Del_Run.asp爲使用Ajax方法執行圖片刪除功能ASP文件，參數項一、參數項2爲必備參數，其餘參數可根據須要自行定義
   $.post("Ajax刪除圖片.asp",{"參數項1":CrrentDelUrl,"參數項2":CurrentIsDir,"參數項3":"參數值3"},function(data){
    //假設Del_Run.asp的data返加值爲：成功succeed、其餘失敗
    if(data=="succeed"){
     //alert("刪除成功（"+data+"）！");
     $this.parent().next().remove();
     $this.parent().remove();
    }else{
     alert("刪除失敗（"+data+"）！");
    }
   });
 });
}

主要修改說明：

（1）在樣式爲ke-inline-block ke-photo的DIV中加入【引用/打開】、【刪除】按鈕，當鼠標位於其上時顯示兩個按鈕，鼠標移開後隱藏兩個按鈕；

（2）在鼠標位於圖片上時提示【文件名稱 data.filename】，改成提示【文件名稱（文件尺寸）】

（3）增長 Ajax 刪除文件代碼。

 

5、步驟4：根據本身所使用的程序語言編寫文件刪除程序，此例中爲 Del_Run.asp 文件。

以ASP爲例，刪除文件及文件夾基本語法爲：

dim OutStau:OutStau="fail"      //定義輸出字符
dim DelFileName:DelFileName='文件或文件夾相對路徑'        //獲取需刪除的文件或文件夾相對路徑，如：img/test.jpg、img/20141215

dim fso,ObjFileMap,ObjDelFile
set fso=Server.CreateObject("Scripting.FileSystemObject")
ObjFileMap=server.Mappath(DelFileName)

'刪除文件夾
if DelFileType="D" and fso.FolderExists(ObjFileMap) then
    fso.DeleteFolder(ObjFileMap)
    if err.number=0 then OutStau="succeed" end if
end if

'刪除文件
If DelFileType="F" and fso.FileExists(ObjFileMap) Then
    fso.DeleteFile(ObjFileMap)
    if err.number=0 then OutStau="succeed" end if
end if

Set fso=nothing

'輸出數據
Response.Write OutStau

修改好的文件管理插件打包下載（含圖標）

http://www.bekda.com/download/sys/filemanager.rar

 說明：

（1）增長刪除文件、文件夾功能大大方便了上傳文件的管理，但權限、安全校驗等機制必定要作好，以避免帶來損失。

（2）以上代碼只用於學習交流，若有錯誤的地方懇請朋友們指正，正式使用時必須根據自身的環境進行安全方面的設置。