以前一直用公司开发的基于javasript+asp开发的dhtml_editor,自己做的,功能很强,但是随着技术的发展,很多软件和网站开始使用.net开发,所以急需一个比较好的.net开发的在线编辑器,因此和FreeTextBox打上了交道,初步使用,感觉还挺好,最关键的是他是开源的,自己可以修改其代码,呵呵,这个,正是我想要的。
但是其中的图片管理在我机器上一直不能很好的运行,而且公司的情况和它的也有部分区别,因此决心对这块做个重写。经过几天的辛苦努力,到刚刚开始不久,终于主要功能全部跑通,基本目的也全部达到。写的不好,第一次发表此类文章,只是想把自己的劳动和人分享。
这个是我机器上的FreeTextBox:
![full.jpg](/images/cnblogs_com/songafeng/full.jpg)
这个就是我设计的图片管理的界面:
![upimage_manager.jpg](/images/cnblogs_com/songafeng/upimage_manager.jpg)
呵呵,和博客园的很像哦,这是因为觉得博客园这样图片管理最合我所要的,我知道还有别的论坛也是采用图片库模式的,但是他们是在别的地方建立好图片库,然后在此做引用,感觉很不方便,我还是喜欢这种形式的。
先说说原理:
系统为每个用户分配一个帐号,同时在相应位置为它创建一个文件夹,那么以后该用户上传的所有图片都放在该文件夹下面。当然,他拥有该文件夹的基本权限,可以创建文件夹,删除图片和子文件夹。
好了,和大家一起交流一下其中的代码吧。
先是界面部分,图片库页面的名称是: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>
<P 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>
<P 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>
<P 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">
<input id="CurrentImagesFolder" type="hidden" value="images\up\admin" name="CurrentImagesFolder" runat="server">
</form>
![](/Images/OutliningIndicators/None.gif)
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";
![](/Images/OutliningIndicators/None.gif)
document.getElementById("btnDelete").value="删除图片";
document.getElementById("txtMessage").value="file";
document.getElementById("txtMessage").value=filename;
![](/Images/OutliningIndicators/None.gif)
}
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";
![](/Images/OutliningIndicators/None.gif)
}
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>
![](/Images/OutliningIndicators/None.gif)
cs文件里需要先写两个方法
1:返回当前文件夹下所有的文件
private string[] ReturnFilesArray() //返回当前文件夹下所有的文件
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
if(CurrRoot+this.CurrentImagesFolder.Value!="")
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
try
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
string appPath=HttpContext.Current.Request.PhysicalApplicationPath;
string CurrFolderPath=appPath + CurrRoot + this.CurrentImagesFolder.Value;
string[] FilesArray=System.IO.Directory.GetFiles(CurrFolderPath,"*");
return FilesArray;
}
catch
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return null;
}
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{return null;}
} 2:返回当前文件夹下所有的文件夹
private string[] ReturnDirectoriesArray() //返回当前文件夹下所有的文件夹
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
if(CurrRoot+this.CurrentImagesFolder.Value!="")
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
try
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
string appPath=HttpContext.Current.Request.PhysicalApplicationPath;
string CurrFolderPath=appPath + CurrRoot + this.CurrentImagesFolder.Value;
string[] DirectoriesArray=System.IO.Directory.GetDirectories(CurrFolderPath,"*");
return DirectoriesArray;
}
catch
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return null;
}
}
else
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return null;
}
} 方法DisplayImages是用来显示文件夹,图片的,在非根目录(这里所指的根目录是系统为其分配的根目录,如我为用户admin分配的是.....\images\up\admin)下还有个返回上一层的图标
先定义变量
private void DisplayImages()
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
string[] FilesArray=ReturnFilesArray();
string[] DirectoriesArray=ReturnDirectoriesArray();
string AppPath=HttpContext.Current.Request.PhysicalApplicationPath;
string AppUrl;
![](/Images/OutliningIndicators/InBlock.gif)
string ImageFileName = "";
string ImageFileLocation = "";
string ImageFileNameShow="";
![](/Images/OutliningIndicators/InBlock.gif)
int thumbWidth = 94;
int thumbHeight = 94;
if(Request.ApplicationPath=="/")
AppUrl=Request.ApplicationPath;
else
AppUrl=Request.ApplicationPath + "/";
![](/Images/OutliningIndicators/InBlock.gif)
this.GalleryPanel.Controls.Clear();
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
showUpImage#region showUpImage
if((FilesArray==null||FilesArray.Length==0)&&(DirectoriesArray==null||DirectoriesArray.Length==0))
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.lblMessage.Text="当前文件夹无图片";
}
![](/Images/OutliningIndicators/InBlock.gif)
if(this.CurrentImagesFolder.Value!="")
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/InBlock.gif)
System.Web.UI.HtmlControls.HtmlImage myHtmlImage = new System.Web.UI.HtmlControls.HtmlImage();
myHtmlImage.Src = AppUrl + "images/ftb/folder.up.gif";
myHtmlImage.Attributes["unselectable"]="on";
myHtmlImage.Attributes["align"]="absmiddle";
myHtmlImage.Attributes["vspace"]="36";
![](/Images/OutliningIndicators/InBlock.gif)
string ParentFolder = (CurrentImagesFolder.Value).Substring(0,(CurrentImagesFolder.Value).LastIndexOf("\\"));
![](/Images/OutliningIndicators/InBlock.gif)
System.Web.UI.WebControls.Panel myImageHolder = new System.Web.UI.WebControls.Panel();
myImageHolder.CssClass = "imageholder";
myImageHolder.Attributes["unselectable"]="on";
myImageHolder.Attributes["onclick"]="divClick(this,'');";
myImageHolder.Attributes["ondblclick"]="gotoFolder('" + ParentFolder.Replace("\\","\\\\") + "');";
myImageHolder.Controls.Add(myHtmlImage);
![](/Images/OutliningIndicators/InBlock.gif)
System.Web.UI.WebControls.Panel myMainHolder = new System.Web.UI.WebControls.Panel();
myMainHolder.CssClass = "thumbnail";
myMainHolder.Controls.Add(myImageHolder);
![](/Images/OutliningIndicators/InBlock.gif)
System.Web.UI.WebControls.Panel myTitleHolder = new System.Web.UI.WebControls.Panel();
myTitleHolder.CssClass = "titleHolder";
myTitleHolder.Controls.Add(new LiteralControl("向上"));
myMainHolder.Controls.Add(myTitleHolder);
![](/Images/OutliningIndicators/InBlock.gif)
GalleryPanel.Controls.Add(myMainHolder);
}
![](/Images/OutliningIndicators/InBlock.gif)
#endregion
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
showDirectories#region showDirectories
foreach (string _Directory in DirectoriesArray)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/InBlock.gif)
try
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
string DirectoryName = _Directory.ToString();
![](/Images/OutliningIndicators/InBlock.gif)
System.Web.UI.HtmlControls.HtmlImage myHtmlImage = new System.Web.UI.HtmlControls.HtmlImage();
myHtmlImage.Src = AppUrl + "images/ftb/folder.big.gif";
myHtmlImage.Attributes["unselectable"]="on";
myHtmlImage.Attributes["align"]="absmiddle";
myHtmlImage.Attributes["vspace"]="29";
![](/Images/OutliningIndicators/InBlock.gif)
System.Web.UI.WebControls.Panel myImageHolder = new System.Web.UI.WebControls.Panel();
myImageHolder.CssClass = "imagespacer";
myImageHolder.Attributes["unselectable"]="on";
myImageHolder.Attributes["onclick"]="divFolderClick(this,'"+ DirectoryName.Substring(DirectoryName.LastIndexOf("\\")+1) +"');";
string currFolder;
currFolder=DirectoryName.Substring((AppPath+CurrRoot).Length);
currFolder=currFolder.Replace("\\","\\\\");
myImageHolder.Attributes["ondblclick"]="gotoFolder('"+ currFolder +"')";
myImageHolder.Controls.Add(myHtmlImage);
![](/Images/OutliningIndicators/InBlock.gif)
System.Web.UI.WebControls.Panel myMainHolder = new System.Web.UI.WebControls.Panel();
myMainHolder.CssClass = "thumbnail";
myMainHolder.Controls.Add(myImageHolder);
![](/Images/OutliningIndicators/InBlock.gif)
System.Web.UI.WebControls.Panel myTitleHolder = new System.Web.UI.WebControls.Panel();
myTitleHolder.CssClass = "titleHolder";
myTitleHolder.Controls.Add(new LiteralControl(DirectoryName.Replace(AppPath + CurrRoot + CurrentImagesFolder.Value + "\\","")));
myMainHolder.Controls.Add(myTitleHolder);
![](/Images/OutliningIndicators/InBlock.gif)
GalleryPanel.Controls.Add(myMainHolder);
}
catch
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
// nothing for error
}
}
#endregion
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
showFiles#region showFiles
![](/Images/OutliningIndicators/InBlock.gif)
foreach (string ImageFile in FilesArray)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/InBlock.gif)
try
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/InBlock.gif)
ImageFileName = ImageFile.ToString();
ImageFileName = ImageFileName.Substring(ImageFileName.LastIndexOf("\\")+1);
ImageFileLocation = AppUrl;
ImageFileLocation = ImageFileLocation.Substring(ImageFileLocation.LastIndexOf("\\")+1);
//galleryfilelocation += "/";
ImageFileLocation += CurrRoot + CurrentImagesFolder.Value;
ImageFileLocation += "/";
ImageFileLocation += ImageFileName;
System.Web.UI.HtmlControls.HtmlImage myHtmlImage = new System.Web.UI.HtmlControls.HtmlImage();
myHtmlImage.Src = ImageFileLocation;
System.Drawing.Image myImage = System.Drawing.Image.FromFile(ImageFile.ToString());
myHtmlImage.Attributes["unselectable"]="on";
//myHtmlImage.border=0;
![](/Images/OutliningIndicators/InBlock.gif)
// landscape image
if (myImage.Width > myImage.Height)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (myImage.Width > thumbWidth)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
myHtmlImage.Width = thumbWidth;
myHtmlImage.Height = Convert.ToInt32(myImage.Height * thumbWidth/myImage.Width);
}
else
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
myHtmlImage.Width = myImage.Width;
myHtmlImage.Height = myImage.Height;
}
// portrait image
}
else
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (myImage.Height > thumbHeight)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
myHtmlImage.Height = thumbHeight;
myHtmlImage.Width = Convert.ToInt32(myImage.Width * thumbHeight/myImage.Height);
}
else
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
myHtmlImage.Width = myImage.Width;
myHtmlImage.Height = myImage.Height;
}
}
if (myHtmlImage.Height < thumbHeight)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
myHtmlImage.Attributes["vspace"] = Convert.ToInt32((thumbHeight/2)-(myHtmlImage.Height/2)).ToString();
}
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
System.Web.UI.WebControls.Panel myImageHolder = new System.Web.UI.WebControls.Panel();
myImageHolder.CssClass = "imagespacer";
myImageHolder.Attributes["onclick"]="divClick(this,'" + ImageFileName + "');";
myImageHolder.Attributes["ondblclick"]="returnImage('" + ImageFileLocation.Replace("\\","/") + "','" + myImage.Width.ToString() + "','" + myImage.Height.ToString() + "');";
myImageHolder.Controls.Add(myHtmlImage);
![](/Images/OutliningIndicators/InBlock.gif)
System.Web.UI.WebControls.Panel myMainHolder = new System.Web.UI.WebControls.Panel();
myMainHolder.CssClass = "thumbnail";
myMainHolder.Controls.Add(myImageHolder);
![](/Images/OutliningIndicators/InBlock.gif)
System.Web.UI.WebControls.Panel myTitleHolder = new System.Web.UI.WebControls.Panel();
myTitleHolder.CssClass = "titleHolder";
if(ImageFileName.Length>12)
ImageFileNameShow=ImageFileName.Substring(0,12)+"
";
else
ImageFileNameShow=ImageFileName;
![](/Images/OutliningIndicators/InBlock.gif)
myTitleHolder.Controls.Add(new LiteralControl(ImageFileNameShow + "<BR>" + myImage.Width.ToString() + "x" + myImage.Height.ToString()));
myMainHolder.Controls.Add(myTitleHolder);
![](/Images/OutliningIndicators/InBlock.gif)
//GalleryPanel.Controls.Add(myImage);
GalleryPanel.Controls.Add(myMainHolder);
myImage.Dispose();
}
catch
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/InBlock.gif)
}
}
#endregion
}
![](/Images/OutliningIndicators/None.gif)
//上传图片
private void btnUp_Click(object sender, System.EventArgs e)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
string fullfilename,filename,extname;
string path;
path=HttpContext.Current.Request.PhysicalApplicationPath + CurrRoot + this.CurrentImagesFolder.Value;
fullfilename=this.upfile.PostedFile.FileName;
filename=fullfilename.Substring(fullfilename.LastIndexOf("\\")+1);
extname=filename.Substring(filename.LastIndexOf(".")+1);
if(extname=="gif"||extname=="jpg"||extname=="png")
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(ImageJudge(filename))
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
upfile.PostedFile.SaveAs(path +@"\"+ filename);
Response.Redirect("ftb.imagegallery.aspx?"+Request.QueryString);
}
else
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.lblMessage.Text="当前文件夹下有图片和你上传的图片重名。";
}
}
else
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
//非图片文件,不能上传。
this.lblMessage.Text="您上传的文件非指定的图片格式。";
}
}
![](/Images/OutliningIndicators/None.gif)
//判断是否有重名的图片
private bool ImageJudge(string filename)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
string[] FilesArray=ReturnFilesArray();
string ImageFileName;
foreach(string ImageFile in FilesArray)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
ImageFileName=ImageFile.Substring(ImageFile.LastIndexOf("\\")+1);
if(ImageFileName==filename)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return false;
}
}
return true;
}
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
//创建文件夹
private void btnCreate_Click(object sender, System.EventArgs e)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
string CurrPath;
string appPath=HttpContext.Current.Request.PhysicalApplicationPath;
CurrPath=appPath+ CurrRoot +this.CurrentImagesFolder.Value +"\\"+ this.txtDirectory.Value;
System.IO.Directory.CreateDirectory(CurrPath);
Response.Redirect("ftb.imagegallery.aspx?"+Request.QueryString);
}
![](/Images/OutliningIndicators/None.gif)
//删除选中的文件/文件夹
private void btnDelete_ServerClick(object sender, System.EventArgs e)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
string ImagePath;
string appPath=HttpContext.Current.Request.PhysicalApplicationPath;
ImagePath=appPath+ CurrRoot +this.CurrentImagesFolder.Value+"\\"+this.txtMessage.Value;
//this.lblMessage.Text=ImagePath;
if(this.DeleteType.Value=="file")
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
try
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
System.IO.File.Delete(ImagePath);
Response.Redirect("ftb.imagegallery.aspx?"+Request.QueryString);
}
catch
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.lblMessage.Text="图片删除失败。";
}
}
else if(this.DeleteType.Value=="folder")
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
try
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
System.IO.Directory.Delete(ImagePath,true);
Response.Redirect("ftb.imagegallery.aspx?"+Request.QueryString);
}
catch
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.lblMessage.Text="图片删除失败。";
}
}
}