快捷導(dǎo)航

ASp.net下fckeditor配置圖片上傳最簡(jiǎn)單的方法

更新時(shí)間：2010年01月13日 03:45:39 作者：

fckeditor 的基本配置我就不講了，講講圖片上傳這塊吧；

1. 原先的配置
把 fckeditor/filemanager/connectors 目錄刪除；
有同學(xué)可能會(huì)問(wèn)了，都刪除了怎么上傳文件?
呵呵。。。

2. 不要引用 FredCK.FCKeditorV2.dll;
因?yàn)槲叶际遣捎胘s寫的，不采用控件的方式；
其實(shí)網(wǎng)上有很多人在嘗試往 fckeditor/filemanager/connectors目錄下注入，
確實(shí)也有人不小心直接把FCK編輯器沒(méi)有任何配置的情況下傳到網(wǎng)上導(dǎo)致中招了；

3. 現(xiàn)在講正題吧，一般來(lái)說(shuō)我們用FCK的時(shí)候并不多，在一個(gè)系統(tǒng)里面可能也就幾個(gè)地方
現(xiàn)在假如我有一個(gè)簡(jiǎn)單的系統(tǒng)，里面有“新聞”發(fā)布和，類似“公司簡(jiǎn)介”單頁(yè)發(fā)布兩個(gè)地方要用的FCK
我要把所有文章的圖片放到 /Article/yyyyMMdd/guid.jpg
把所有單頁(yè)的圖片放到 /Page/yyyyMMdd/guid.jpg
或者說(shuō)我要把圖片按用戶存到不同的地方。。。

4.實(shí)現(xiàn)
怎么很簡(jiǎn)單的事情要說(shuō)清楚需要做這么多鋪墊，太麻煩了。。。。?。?！

web頁(yè)面：
代碼

復(fù)制代碼代碼如下:

 
<form id="form1" runat="server"> 
<div> 
<div> 
<asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server"> </asp:TextBox> 
</div> 
<br /> 
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> 
</div> 
</form> 

JS：

代碼

復(fù)制代碼代碼如下:

 
<script src="fckeditor/fckeditor.js" type="text/javascript"></script> 
<script type="text/javascript"> 
window.onload = function() { 
var oFCKeditor = new FCKeditor('<%= TextBox1.ClientID %>'); 
oFCKeditor.BasePath = 'fckeditor/' 
oFCKeditor.Config.ImageUploadURL = "/admin/auploader.aspx"; 
oFCKeditor.ReplaceTextarea(); 
} 
</script> 

這樣就搞定了！
不要不相信啊，下面把上傳頁(yè)面的代碼簡(jiǎn)單的寫一個(gè)吧，對(duì)這個(gè)也比較重要；

代碼

復(fù)制代碼代碼如下:

 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (Request.Files.Count > 0) 
{ 
HttpPostedFile file = Request.Files[0]; 
string path = "/Article/" + System.DateTime.Now.ToString("yyyyMMdd") + "/"; 
string serverPath = Server.MapPath(path); 
string fileName = Guid.NewGuid() + file.FileName.Substring(file.FileName.LastIndexOf(".")); 
if (!System.IO.Directory.Exists(serverPath)) 
System.IO.Directory.CreateDirectory(serverPath); 
file.SaveAs(serverPath + fileName); 
SendFileUploadResponse(0, path + fileName, fileName, "上傳成功！"); 
} 
else 
{ 
SendFileUploadResponse(1, "", "", "上傳失??！"); 
} 
} 

public void SendFileUploadResponse(int isSucceed, string fileUrl, string fileName, string customMsg) 
{ 
System.Web.HttpContext.Current.Response.Clear(); 
System.Web.HttpContext.Current.Response.Write("<script type='text/javascript'>"); 
System.Web.HttpContext.Current.Response.Write(@"(function(){var d=document.domain;while (true){try{var A=window.top.opener.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();"); 
System.Web.HttpContext.Current.Response.Write("window.parent.OnUploadCompleted(" + isSucceed.ToString().ToLower() + ", '" + fileUrl + "', '" + fileName + "', '" + customMsg + "');"); 
System.Web.HttpContext.Current.Response.Write("</script>"); 
System.Web.HttpContext.Current.Response.End(); 
} 

好了搞定了！
這個(gè)上傳代碼沒(méi)有做嚴(yán)格的后綴限制，大小限制；因?yàn)檫@個(gè)頁(yè)面路徑是我們自己配置的嘛，想怎么寫就怎么寫了；
甚至你可以根據(jù)不同的用戶存到不同的地方；
這里需要說(shuō)明一下 SendFileUploadResponse 方法，其實(shí)就是為FCk傳回消息；
這里：
System.Web.HttpContext.Current.Response.Write("window.parent.OnUploadCompleted(" + isSucceed.ToString().ToLower() + ", '" + fileUrl + "', '" + fileName + "', '" + customMsg + "');");

對(duì)應(yīng)的是
fckeditor/dialog/fck_image/fck_image.js

代碼

復(fù)制代碼代碼如下:

 
function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg ) 
{ 
// Remove animation 
window.parent.Throbber.Hide() ; 
GetE( 'divUpload' ).style.display = '' ; 
switch ( errorNumber ) 
{ 
case 0 : // No errors 
alert( 'Your file has been successfully uploaded' ) ; 
break ; 
case 1 : // Custom error 
alert( customMsg ) ; 
return ; 
case 101 : // Custom warning 
alert( customMsg ) ; 
break ; 
case 201 : 
alert( 'A file with the same name is already available. The uploaded file has been renamed to "' + fileName + '"' ) ; 
break ; 
case 202 : 
alert( 'Invalid file type' ) ; 
return ; 
case 203 : 
alert( "Security error. You probably don't have enough permissions to upload. Please check your server." ) ; 
return ; 
case 500 : 
alert( 'The connector is disabled' ) ; 
break ; 
default : 
alert( 'Error on file upload. Error number: ' + errorNumber ) ; 
return ; 
} 
sActualBrowser = '' ; 
SetUrl( fileUrl ) ; 
GetE('frmUpload').reset() ; 
} 

注意到 0 ，是成功，1 是失敗，其他的自己看吧。。。。
對(duì)了說(shuō)明一下這里用的是 2.65 版本測(cè)試的，如果有其他版本不一樣的靈活變通下哈；

總結(jié)一下：
1. 在不同的頁(yè)面配置不同的圖片處理路徑，如：
oFCKeditor.Config.ImageUploadURL = "/admin/aupload.aspx";
oFCKeditor.Config.ImageUploadURL = "/admin/bupload.aspx";
。。。。

2. FCk 會(huì)把圖片post到指定的路徑，
然后你自己操作圖片，按目錄存啊還是按當(dāng)前用戶session存隨便來(lái)；
當(dāng)然別忘記驗(yàn)證用戶的身份在先，沒(méi)有權(quán)限的不要對(duì)他客氣，直接返回錯(cuò)誤，
驗(yàn)證身份示例代碼里面沒(méi)寫，自己根據(jù)項(xiàng)目自己加吧

3. 一定要返回值告訴FCK你的操作結(jié)果，否則會(huì)一直死在那里的。。。

PS：
看來(lái)我不是個(gè)喜歡寫東西的人，覺(jué)得很麻煩。。。

您可能感興趣的文章: