以前一直用公司开发的基于javasript+asp开发的dhtml_editor,自己做的,功能很强,但是随着技术的发展,很多软件和网站开始使用.net开发,所以急需一个比较好的.net开发的在线编辑器,因此和FreeTextBox打上了交道,初步使用,感觉还挺好,最关键的是他是开源的,自己可以修改其代码,呵呵,这个,正是我想要的。
       但是其中的图片管理在我机器上一直不能很好的运行,而且公司的情况和它的也有部分区别,因此决心对这块做个重写。经过几天的辛苦努力,到刚刚开始不久,终于主要功能全部跑通,基本目的也全部达到。写的不好,第一次发表此类文章,只是想把自己的劳动和人分享。
      这个是我机器上的FreeTextBox:
远程图片库管理。
这个就是我设计的图片管理的界面:
远程图片库管理。
呵呵,和博客园的很像哦,这是因为觉得博客园这样图片管理最合我所要的,我知道还有别的论坛也是采用图片库模式的,但是他们是在别的地方建立好图片库,然后在此做引用,感觉很不方便,我还是喜欢这种形式的。
先说说原理:
    系统为每个用户分配一个帐号,同时在相应位置为它创建一个文件夹,那么以后该用户上传的所有图片都放在该文件夹下面。当然,他拥有该文件夹的基本权限,可以创建文件夹,删除图片和子文件夹。
    好了,和大家一起交流一下其中的代码吧。
    先是界面部分,图片库页面的名称是:ftb.imagegallery.aspx
这是form中的代码:

远程图片库管理。<form id="Form1" method="post" encType="multipart/form-data" runat="server">
远程图片库管理。 
<table width="100%" align="center">
远程图片库管理。  
<tr>
远程图片库管理。   
<td>图片管理 [双击图片即可插入]<asp:label id="lblMessage" runat="server" ForeColor="Red"></asp:label>
远程图片库管理。   
</td>
远程图片库管理。  
</tr>
远程图片库管理。 
</table>
远程图片库管理。 
<hr>
远程图片库管理。 
<asp:panel id="GalleryPanel" style="OVERFLOW: auto" runat="server" Width="560px" Height="456px"
远程图片库管理。  BorderColor
="White" BackColor="White">
远程图片库管理。  
<FONT face="宋体"></FONT>
远程图片库管理。 
</asp:panel></FONT>
远程图片库管理。 
<table style="WIDTH: 528px; HEIGHT: 112px" width="528">
远程图片库管理。  
<tr>
远程图片库管理。   
<td style="WIDTH: 114px">消息:</td>
远程图片库管理。   
<td style="WIDTH: 316px"><input id="txtMessage" style="WIDTH: 264px; HEIGHT: 19px" readOnly size="38" runat="server"
远程图片库管理。     Width
="264px"></td>
远程图片库管理。   
<td>
远程图片库管理。    
<align="center"><input id="btnDelete" type="button" value="删除图片" runat="server" Width="97px"></P>
远程图片库管理。   
</td>
远程图片库管理。  
</tr>
远程图片库管理。  
<tr>
远程图片库管理。   
<td style="WIDTH: 114px">上传图片:</td>
远程图片库管理。   
<td style="WIDTH: 316px"><input id="upfile" style="WIDTH: 264px; HEIGHT: 22px" type="file" size="24" name="upfile"
远程图片库管理。     runat
="server"></td>
远程图片库管理。   
<td>
远程图片库管理。    
<align="center"><asp:button id="btnUp" runat="server" Width="71px" Text="上传图片"></asp:button></P>
远程图片库管理。   
</td>
远程图片库管理。  
</tr>
远程图片库管理。  
<tr>
远程图片库管理。   
<td style="WIDTH: 114px">但前文件夹:</td>
远程图片库管理。   
<td style="WIDTH: 316px"><input id="txtDirectory" style="WIDTH: 264px; HEIGHT: 19px" size="38" runat="server" Width="264px"></td>
远程图片库管理。   
<td>
远程图片库管理。    
<align="center"><asp:button id="btnCreate" runat="server" Text="创建文件夹"></asp:button></P>
远程图片库管理。   
</td>
远程图片库管理。  
</tr>
远程图片库管理。 
</table>
远程图片库管理。 
<input id="DeleteType" type="hidden" value="file" name="DeleteType" runat="server">&nbsp;
远程图片库管理。 
<input id="CurrentImagesFolder" type="hidden" value="images\up\admin" name="CurrentImagesFolder" runat="server">
远程图片库管理。
</form>
远程图片库管理。



javascript部分:
  

远程图片库管理。<script language="javascript">
远程图片库管理。 lastDiv 
= null;
远程图片库管理。 
function divClick(theDiv,filename) {
远程图片库管理。  
if (lastDiv) {
远程图片库管理。   lastDiv.style.border 
= "1 solid #CCCCCC";
远程图片库管理。  }
远程图片库管理。  lastDiv 
= theDiv;
远程图片库管理。  theDiv.style.border 
= "2 solid #316AC5";
远程图片库管理。
远程图片库管理。  document.getElementById(
"btnDelete").value="删除图片";
远程图片库管理。  document.getElementById(
"txtMessage").value="file";
远程图片库管理。  document.getElementById(
"txtMessage").value=filename;
远程图片库管理。
远程图片库管理。 }
远程图片库管理。 
function divFolderClick(theDiv,foldername) {
远程图片库管理。  
if (lastDiv) {
远程图片库管理。   lastDiv.style.border 
= "1 solid #CCCCCC";
远程图片库管理。  }
远程图片库管理。  lastDiv 
= theDiv;
远程图片库管理。  theDiv.style.border 
= "2 solid #316AC5";
远程图片库管理。  
远程图片库管理。  document.getElementById(
"btnDelete").value="删除文件夹";
远程图片库管理。  document.getElementById(
"txtMessage").value=foldername;
远程图片库管理。  document.getElementById(
"DeleteType").value="folder";
远程图片库管理。
远程图片库管理。 } 
远程图片库管理。 
function gotoFolder(newfolder)
远程图片库管理。 {
远程图片库管理。  window.navigate(
"ftb.imagegallery.aspx?frame=1&rif=images&cif="+newfolder);
远程图片库管理。 }
远程图片库管理。 
function returnImage(imagename,width,height) {
远程图片库管理。  
var imagestring;
远程图片库管理。  imagestring 
= '<IMG SRC="' + imagename + '" HEIGHT=+ height + ' WIDTH=+ width + ' BORDER=0>';
远程图片库管理。  sel
=opener.FreeTextBox1_editor.document.selection.createRange();
远程图片库管理。  sel.pasteHTML(imagestring);  
远程图片库管理。  window.close();
远程图片库管理。 }
远程图片库管理。  
</script>
远程图片库管理。



cs文件里需要先写两个方法
1:返回当前文件夹下所有的文件

远程图片库管理。        private string[] ReturnFilesArray() //返回当前文件夹下所有的文件
        }
2:返回当前文件夹下所有的文件夹
远程图片库管理。        private string[] ReturnDirectoriesArray() //返回当前文件夹下所有的文件夹
        }
方法DisplayImages是用来显示文件夹,图片的,在非根目录(这里所指的根目录是系统为其分配的根目录,如我为用户admin分配的是.....\images\up\admin)下还有个返回上一层的图标
先定义变量
远程图片库管理。        private void DisplayImages()
        }

相关文章:

  • 2021-05-26
  • 2021-09-21
  • 2021-09-29
  • 2021-09-05
  • 2021-10-03
  • 2021-11-23
猜你喜欢
  • 2022-01-07
  • 2021-04-19
  • 2022-12-23
  • 2021-05-21
  • 2021-10-27
相关资源
相似解决方案