如題,本身的CKEDITOR控件並沒有開啟上傳圖片的功能,
打開圖像按鈕,只有圖像信息和高級兩個table選項卡,版本不同,顯示略有差異,我的實現是有兩種方法都可以添加上傳功能,
第一種方法使用CKEDITOR自身代碼功能
“預覽”中有一大堆鳥語,看得很不爽。可以使用1或2來進行清除。
1:可以打開ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”就能找到這段鳥語了,(b.config.image_previewText||'')單引號中的內容全刪了,注意別刪多了。
2:打開ckeditor/config.js文件,在此函數內,添加
config.image_previewText = ''; //清空預覽區域顯示內容
打開ckeditor/plugins/image/dialogs/image.js文件,搜索“upload”可以找到這一段
id:'Upload',hidden:true
實際上上傳功能被隱藏了,把上面的true改成false,如果你的顯示是hidden:!0,直接改成0即可,就可以顯示了,再打開編輯器,就能找到上傳功能了。
設置上傳到服務器按鈕的事件URL,指定將上傳的文件提交給那個URL進行處理,
打開ckeditor/config.js文件,在此函數內,添加
config.filebrowserImageUploadUrl = "../UploadweixinImgHandler.ashx";//設置提交上傳圖片按鈕處理URL,我這里設置的提交給一個一般處理程序,這個是自己要創建的,我的是創建到根目錄的,所以會有../,好了,下面開始編寫UploadweixinImgHandler.ashx文件內的代碼吧,如下:
public void ProcessRequest(HttpContext context)
{
String callback = context.Request.QueryString["CKEditorFuncNum"].ToString();
///'遍歷File表單元素
HttpFileCollection files = HttpContext.Current.Request.Files;
for (int iFile = 0; iFile < files.Count; iFile++)
{
// ///'檢查文件擴展名字
HttpPostedFile postedFile = files[iFile];
//HttpPostedFile postedFile = files[0];
string fileName; //, fileExtension
fileName = System.IO.Path.GetFileName(postedFile.FileName);
string fileContentType = postedFile.ContentType.ToString();
if (fileContentType == "image/bmp" || fileContentType == "image/gif" ||
fileContentType == "image/png" || fileContentType == "image/x-png" || fileContentType == "image/jpeg"
|| fileContentType == "image/pjpeg")
{
if (postedFile.ContentLength <= 2097152)
{
string filepath = postedFile.FileName; //得到的是文件的完整路徑,包括文件名,如:C:\Documents and Settings\Administrator\My Documents\My Pictures\20022775_m.jpg
//string filepath = FileUpload1.FileName; //得到上傳的文件名20022775_m.jpg
string serverpath = context.Server.MapPath("~/WeiXinImg/") + fileName;//取得文件在服務器上保存的位置C:\Inetpub\wwwroot\WebSite1\images\20022775_m.jpg
postedFile.SaveAs(serverpath);//上傳圖片到服務器指定地址
string imageurl = "http://localhost:8665/WeiXinImg/"+fileName;//我是將測試時的本地地址+放置圖像的文件夾+圖片名稱作為返回的URL
// 返回"圖像"選項卡並顯示圖片
context.Response.Write("<script type=\"text/javascript\">");
context.Response.Write("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + imageurl + "','')");
context.Response.Write("</script>");
}
else
{
context.Response.Write("<script>alert('上傳文件不能大於2M!')</script>");
}
}
else
{
context.Response.Write("<script>alert('只支持BMP、GIF、JPG、PNG格式的圖片!')</script>");
}
}
}
好了,以上是使用CKEDITOR自身的上傳功能,外加一個一般處理程序來完成上傳功能。
第二種設置上傳功能方法:如果你已經有了自己的上傳模板(我指的是一個單獨的上傳網頁),
打開ckeditor/plugins/image/dialogs/image.js文件,搜索“urlMissing”可以找到這一段,在},之后添加如下代碼:
{ type: 'button', id: 'myUpload', style:"margin-top:14px;", align: 'center', label: '本地上傳', onClick: function () { var retFile = showModalDialog("../UpLoadWeixinImg.aspx", "", "dialogHeight:380;dialogWidth:600;"); if (retFile != null) { this.getDialog().setValueOf('info', 'txtUrl', retFile); } } },
showModalDialog("../UpLoadWeixinImg.aspx",指定轉向URL的鏈接地址,上傳模板,showModalDialog方法在IE和火狐下能正常運行,在谷歌瀏覽器下可能不兼容,反正我試了不行,聽說用window.open可以代替,我沒有去嘗試,您可以去試下,
運行界面如下:
下面來看看UpLoadWeixinImg.aspx上傳頁面模板的代碼如下:
/// <summary>
/// 上傳圖片
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void LinkBtnFileUploadImg_Click(object sender, EventArgs e)
{
if (this.FileUploadImg.HasFile)
{
string fileContentType = FileUploadImg.PostedFile.ContentType;
if (fileContentType == "image/bmp" || fileContentType == "image/gif"||
fileContentType == "image/png"|| fileContentType == "image/x-png"|| fileContentType == "image/jpeg"
|| fileContentType == "image/pjpeg")
{
int fileSize = this.FileUploadImg.PostedFile.ContentLength;
if (fileSize <= 2097152)
{
string fileName = this.FileUploadImg.PostedFile.FileName; // 客戶端文件路徑
string imageurl = "http://localhost:8665/WeiXinImg/" + fileName;
string filepath = FileUploadImg.PostedFile.FileName; //得到的是文件的完整路徑,包括文件名,如:C:\Documents and Settings\Administrator\My Documents\My Pictures\20022775_m.jpg
//string filepath = FileUpload1.FileName; //得到上傳的文件名20022775_m.jpg
string filename = filepath.Substring(filepath.LastIndexOf("\\") + 1);//20022775_m.jpg
string serverpath = Server.MapPath("~/WeiXinImg/") + filename;//取得文件在服務器上保存的位置C:\Inetpub\wwwroot\WebSite1\images\20022775_m.jpg
this.FileUploadImg.PostedFile.SaveAs(serverpath);//將上傳的文件另存為
//此處我調用的是前台客戶端的js腳本
ClientScript.RegisterStartupScript(this.GetType(), "SayHello", "<script>SayHello('" + imageurl + "')</script>");
}
else
{
Response.Write("<script>alert('上傳文件不能大於2M!')</script>");
}
}
else
{
Response.Write("<script>alert('只支持BMP、GIF、JPG、PNG格式的圖片!')</script>");
}
}
else
{
Response.Write("<script>alert('請選擇圖片!')</script>");
}
}
SayHello腳本如下:
<script type="text/javascript">
function SayHello(imgPath) {
window.returnValue = imgPath; //上傳后的圖片鏈接
window.close();
}
</script>
最終實現如下圖:
這兩種方式實現方式一樣,具體哪個好用可以根據需要選擇,以上代碼中,如有冗余的代碼,請自行刪除,我也是在網上七拼八湊一行一行代碼測試出來的