ASp.net下fckeditor配置图片上传最简单的方法
程序员文章站
2022-06-16 19:49:09
1. 原先的配置 把 fckeditor/filemanager/connectors 目录删除; 有同学可能会问了,都删除了怎么上传文件? 呵呵。。。 2. 不要引用 f...
1. 原先的配置
把 fckeditor/filemanager/connectors 目录删除;
有同学可能会问了,都删除了怎么上传文件?
呵呵。。。
2. 不要引用 fredck.fckeditorv2.dll;
因为我都是采用js写的,不采用控件的方式;
其实网上有很多人在尝试往 fckeditor/filemanager/connectors目录下注入,
确实也有人不小心直接把fck编辑器没有任何配置的情况下传到网上导致中招了;
3. 现在讲正题吧,一般来说我们用fck的时候并不多,在一个系统里面可能也就几个地方
现在假如我有一个简单的系统,里面有“新闻”发布和,类似“公司简介”单页发布两个地方要用的fck
我要把所有文章的图片放到 /article/yyyymmdd/guid.jpg
把所有单页的图片放到 /page/yyyymmdd/guid.jpg
或者说我要把图片按用户存到不同的地方。。。
4.实现
怎么很简单的事情要说清楚需要做这么多铺垫,太麻烦了。。。。!!!
web页面:
代码
<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:
代码
<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>
这样就搞定了!
不要不相信啊,下面把上传页面的代码简单的写一个吧,对这个也比较重要;
代码
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();
}
好了搞定了!
这个上传代码没有做严格的后缀限制,大小限制;因为这个页面路径是我们自己配置的嘛,想怎么写就怎么写了;
甚至你可以根据不同的用户存到不同的地方;
这里需要说明一下 sendfileuploadresponse 方法,其实就是为fck传回消息;
这里:
system.web.httpcontext.current.response.write("window.parent.onuploadcompleted(" + issucceed.tostring().tolower() + ", '" + fileurl + "', '" + filename + "', '" + custommsg + "');");
对应的是
fckeditor/dialog/fck_image/fck_image.js
代码
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 是失败,其他的自己看吧。。。。
对了说明一下这里用的是 2.65 版本测试的,如果有其他版本不一样的灵活变通下哈;
总结一下:
1. 在不同的页面配置不同的图片处理路径,如:
ofckeditor.config.imageuploadurl = "/admin/aupload.aspx";
ofckeditor.config.imageuploadurl = "/admin/bupload.aspx";
。。。。
2. fck 会把图片post到指定的路径,
然后你自己操作图片,按目录存啊还是按当前用户session存随便来;
当然别忘记验证用户的身份在先,没有权限的不要对他客气,直接返回错误,
验证身份示例代码里面没写,自己根据项目自己加吧
3. 一定要返回值告诉fck你的操作结果,否则会一直死在那里的。。。
ps:
看来我不是个喜欢写东西的人,觉得很麻烦。。。
把 fckeditor/filemanager/connectors 目录删除;
有同学可能会问了,都删除了怎么上传文件?
呵呵。。。
2. 不要引用 fredck.fckeditorv2.dll;
因为我都是采用js写的,不采用控件的方式;
其实网上有很多人在尝试往 fckeditor/filemanager/connectors目录下注入,
确实也有人不小心直接把fck编辑器没有任何配置的情况下传到网上导致中招了;
3. 现在讲正题吧,一般来说我们用fck的时候并不多,在一个系统里面可能也就几个地方
现在假如我有一个简单的系统,里面有“新闻”发布和,类似“公司简介”单页发布两个地方要用的fck
我要把所有文章的图片放到 /article/yyyymmdd/guid.jpg
把所有单页的图片放到 /page/yyyymmdd/guid.jpg
或者说我要把图片按用户存到不同的地方。。。
4.实现
怎么很简单的事情要说清楚需要做这么多铺垫,太麻烦了。。。。!!!
web页面:
代码
复制代码 代码如下:
<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:
代码
复制代码 代码如下:
<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>
这样就搞定了!
不要不相信啊,下面把上传页面的代码简单的写一个吧,对这个也比较重要;
代码
复制代码 代码如下:
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();
}
好了搞定了!
这个上传代码没有做严格的后缀限制,大小限制;因为这个页面路径是我们自己配置的嘛,想怎么写就怎么写了;
甚至你可以根据不同的用户存到不同的地方;
这里需要说明一下 sendfileuploadresponse 方法,其实就是为fck传回消息;
这里:
system.web.httpcontext.current.response.write("window.parent.onuploadcompleted(" + issucceed.tostring().tolower() + ", '" + fileurl + "', '" + filename + "', '" + custommsg + "');");
对应的是
fckeditor/dialog/fck_image/fck_image.js
代码
复制代码 代码如下:
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 是失败,其他的自己看吧。。。。
对了说明一下这里用的是 2.65 版本测试的,如果有其他版本不一样的灵活变通下哈;
总结一下:
1. 在不同的页面配置不同的图片处理路径,如:
ofckeditor.config.imageuploadurl = "/admin/aupload.aspx";
ofckeditor.config.imageuploadurl = "/admin/bupload.aspx";
。。。。
2. fck 会把图片post到指定的路径,
然后你自己操作图片,按目录存啊还是按当前用户session存随便来;
当然别忘记验证用户的身份在先,没有权限的不要对他客气,直接返回错误,
验证身份示例代码里面没写,自己根据项目自己加吧
3. 一定要返回值告诉fck你的操作结果,否则会一直死在那里的。。。
ps:
看来我不是个喜欢写东西的人,觉得很麻烦。。。