利用FCKeditor的图片上传【转】

时间:2022-10-29 19:41:51

FCKeditor的确是个错的编辑器,从ASP.NET 1.1就开始在用。

之前没做过图片上传,最近要做个产品发布的小东西,使用ASP.NET2.0的文件上传组件老是出问题。考虑到FCKeditor中的图片上传功能不错,而且有浏览服务器文件的功能,所以就直接拿来用了。下面实现了不修改FCKeditor本身的任何代码,对FCKeditor的文件浏览器加以利用。

首先,放一个TextBox和Button。TextBox当然是放图片文件路径的,Button按钮用于浏览服务器:

<asp:TextBox ID="txt_PicUrl_Insert" runat="server" MaxLength="100" Width="280px"></asp:TextBox>
<input id="btn_OpenFileBrowser_Insert" onclick="openFileBrowser('/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx',800,600);" type="button" value="浏览服务器" />

在点击Button的时候执行打开FCKeditor图片浏览器窗口的一个javascript方法:openFileBrowser()。
该方法代码:
function openFileBrowser(url, width, height )
{
 var iLeft = ( window.ScreenWidth  - width ) / 2 ;
 var iTop  = ( window.ScreenHeiht - height ) / 2 ;

 var sOptions = "toolbar=no,status=no,resizable=yes,dependent=yes" ;
 sOptions += ",width=" + width ;
 sOptions += ",height=" + height ;
 sOptions += ",left=" + iLeft ;
 sOptions += ",top=" + iTop ;

 var oWindow = window.open( url, '服务器文件浏览', sOptions  ) ;
}
另/FCKeditor/editor/filemanager/browser/default/browser.html为图片浏览器的路径,Type=Image&Connector=connectors/aspx/connector.aspx为FCKeditor必需的参数。

然后,在浏览服务器的过程中,选择了需要的文件,需要把值赋给TextBox(txt_PicUrl_Insert),
这里又需要写一个javascript 方法SetUrl( ),注意该方法必须是下面的参数格式,并且方法名不能改成其他的:
function SetUrl( url, width, height, alt )
{

  if(document.getElementById('txt_PicUrl_Insert')!=null)
  {
  document.getElementById('txt_PicUrl_Insert').value = url ;
  }
  else
 {
     alert("对象赋值失败:对象不存在!");
 }
//注意该方法不仅传如了文件的URL地址,还传入了另外三个参数,width,height,alt,如果需要的话可以加以利用。这里虽然没使用,但也不能删除掉。
}