asp.net2.0推荐一个功能强大的图片选择控件

最新推荐文章于 2024-07-26 11:41:15 发布

zj1103

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量490

点赞数

分类专栏：站点功能文章标签： asp.net string server hyperlink button javascript

本文链接：https://blog.csdn.net/zj1103/article/details/4089848

版权

站点功能专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在做网站的时候,很多情况用到图片上传与选择。FreeTextBox控件里用一个图片选择控件，我觉得很好，就单独拿出来用了。
1、建立TestImgSelect网站，建立images文件夹，在images里建立face文件夹用来存放头像，图片如下：


5.gif	8.gif	9.gif	10.gif

2、建立user文件夹，在里面建立SelectImage.aspx文件和Default.aspx文件
3、SelectImage.aspx代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SelectImage.aspx.cs" Inherits="user_SelectImage" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>
选择图片
</title>

<meta http-equiv="Expires" content="0"/>
<base target="_self"/>
<style type="text/css">
body { border-right: 0px; padding-right: 0px; border-top: 0px; padding-left: 0px; background: #ffffff; padding-bottom: 0px; margin: 0px; overflow: hidden; border-left: 0px; width: 100%; padding-top: 0px; border-bottom: 0px }
body { font-size: 10pt; color: #000000; font-family: verdana, arial, helvetica, sans-serif }
tr { font-size: 10pt; color: #000000; font-family: verdana, arial, helvetica, sans-serif }
td { font-size: 10pt; color: #000000; font-family: verdana, arial, helvetica, sans-serif }
div.imagespacer { float: left; margin: 5px; font: 10pt verdana; overflow: hidden; width: 120px; height: 126px; text-align: center }
div.imageholder { border-right: #cccccc 1px solid; padding-right: 0px; border-top: #cccccc 1px solid; padding-left: 0px; padding-bottom: 0px; margin: 0px; border-left: #cccccc 1px solid; width: 100px; padding-top: 0px; border-bottom: #cccccc 1px solid; height: 100px }
div.titleholder { font-size: 8pt; overflow: hidden; width: 100px; font-family: ms sans serif, arial; white-space: nowrap; text-overflow: ellipsis }
.box { border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; border-bottom: #000000 1px solid }
</style>
</head>
<script language="javascript" type="text/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("FileToDelete").value = filename;
}

function gotoFolder(rootfolder,newfolder) {
window.navigate("ftb.imagegallery.aspx?frame=1&rif=" + rootfolder + "&cif=" + newfolder);
}

function returnImage(imagename,width,height) {
var arr = new Array();
arr["filename"] = imagename;
arr["width"] = width;
arr["height"] = height;
window.parent.returnValue = arr;
window.parent.close();
}
</script>
<body>
<form id="Form1" method="post" runat="server">
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 100%;">
<tr>
<td>
<div id="galleryarea" style=" OVERFLOW:auto; width:100%; HEIGHT:100%">
<asp:label id="gallerymessage" runat="server"></asp:label>
<asp:panel id="GalleryPanel" runat="server"></asp:panel>
</div>
</td>
</tr>
<asp:Panel id="UploadPanel" runat="server">
<tr>
<td style="BORDER-TOP: #999999 1px solid; PADDING-LEFT: 10px; BACKGROUND-COLOR: whitesmoke" height="16">
<table>
<tr>
<td valign="top">点击浏览后选择图片，再点击上传你的自定义图像<BR>
之后在列表中选择你的自定义图像</td>
<td valign="top"></td>
<td style="width: 169px" valign="top"></td>
<td valign="middle"></td>
</tr>
<tr>
<td valign="top">
<input class="box" id="UploadFile" style="width: 312px; HEIGHT: 20px" type="file" size="32" name="UploadFile" runat="server"/></td>
<td valign="top">
<asp:Button id="btnUpload" runat="server" CssClass="box" Text="上传 " Width="32px" onclick="UploadImage_onClick"></asp:Button></td>
<td style="width: 169px" valign="top">
<asp:button id="DeleteImage" runat="server" CssClass="box" Text="删除" onclick="DeleteImage_onClick"></asp:button></td>
<td valign="middle" noWrap>
<asp:HyperLink id="HyperLink1" runat="server" NavigateUrl="javascript：window.close()">关闭</asp:HyperLink></td>
</tr>
<tr>
<td style="width: 524px" colspan="3">
<asp:Label id="ResultsMessage" runat="server" ForeColor="OrangeRed"></asp:Label></td>
</tr>
</table>
<input id="FileToDelete" type="hidden" name="FileToDelete" runat="server"/>
<input id="RootImagesFolder" type="hidden" value="images" name="RootImagesFolder" runat="server"/>
<input id="CurrentImagesFolder" type="hidden" value="images" name="CurrentImagesFolder" runat="server" />
</td>
</tr>
</asp:Panel>
</table>
</form>
</body>
</html>

4、SelectImage.aspx.cs代码如下，注意private string DefaultImageFolder = "images//face";//图片存放路径：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class user_SelectImage : System.Web.UI.Page
{
private string NoFileMessage = "未选中任何文件";
private string UploadSuccessMessage = "上传成功";
private string NoImagesMessage = "没有图像";
private string NoFolderSpecifiedMessage = "没有文件夹";
private string NoFileToDeleteMessage = "没有文件可删除";
private string InvalidFileTypeMessage = "不合法的文件类型";
private string BigImgmsg = "图片宽度或长度过大！";
private string BigSizemsg = "图片大小过大！";
private string[] AcceptedFileTypes = new string[] { "jpg", "jpeg", "jpe", "gif", "bmp", "png" };

// Configuration
private bool UploadIsEnabled = true;
private bool DeleteIsEnabled = false;
private string DefaultImageFolder = "images//face";//图片存放路径
protected void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
RootImagesFolder.Value = DefaultImageFolder;
CurrentImagesFolder.Value = DefaultImageFolder;
UploadPanel.Visible = UploadIsEnabled;
DeleteImage.Visible = DeleteIsEnabled;

if (!IsPostBack)
{
DisplayImages();
}
}

protected void UploadImage_onClick(object sender, EventArgs e)
{
if (Page.IsValid)
{
if (CurrentImagesFolder.Value != "")
{
if (UploadFile.PostedFile.FileName.Trim() != "")
{
if (IsValidFileType(UploadFile.PostedFile.FileName))
{
if (this.isBigWidthorHeight(UploadFile.PostedFile.InputStream))
{
if (IsBigSize(UploadFile.PostedFile.ContentLength))
{
try
{
string UploadFileName = "";
string UploadFileDestination = "";
UploadFileName = UploadFile.PostedFile.FileName;
UploadFileName = UploadFileName.Substring(UploadFileName.LastIndexOf("/") + 1);
UploadFileDestination = HttpContext.Current.Request.PhysicalApplicationPath;
UploadFileDestination += CurrentImagesFolder.Value;
UploadFileDestination += "/";
UploadFile.PostedFile.SaveAs(UploadFileDestination + UploadFileName);
ResultsMessage.Text = UploadSuccessMessage;
}
catch
{
ResultsMessage.Text = "未能成功上传，有错误发生";
}
}
else
{
ResultsMessage.Text = this.BigSizemsg;
}
}
else
{
ResultsMessage.Text = this.BigImgmsg;
}
}
else
{
ResultsMessage.Text = InvalidFileTypeMessage;
}
}
else
{
ResultsMessage.Text = NoFileMessage;
}
}
else
{
ResultsMessage.Text = NoFolderSpecifiedMessage;
}
}
else
{
ResultsMessage.Text = InvalidFileTypeMessage;

}
DisplayImages();
}

/// <summary>
/// 图片是否过高或过宽
/// </summary>
/// <param name="FileName"></param>
/// <returns></returns>
private bool isBigWidthorHeight(System.IO.Stream Fs)
{
//判断上传图片的大小，过大的话，不让上传
System.Drawing.Image myImage = System.Drawing.Image.FromStream(Fs);
if (myImage.Width > 130 || myImage.Height > 130)
return false;
else
return true;
}

/// <summary>
/// 图片是否过大
/// </summary>
/// <param name="imgSize"></param>
/// <returns></returns>
private bool IsBigSize(int imgSize)
{
if (imgSize > 20 * 1024)
return false;
else
return true;
}

/// <summary>
/// 删除图像
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void DeleteImage_onClick(object sender, EventArgs e)
{
if (FileToDelete.Value != "" && FileToDelete.Value != "undefined")
{
try
{
string AppPath = HttpContext.Current.Request.PhysicalApplicationPath;
System.IO.File.Delete(AppPath + CurrentImagesFolder.Value + "/" + FileToDelete.Value);
ResultsMessage.Text = "已经删除: " + FileToDelete.Value;
}
catch
{
ResultsMessage.Text = "未能成功删除，有错误发生.";
}
}
else
{
ResultsMessage.Text = NoFileToDeleteMessage;
}
DisplayImages();
}

private bool IsValidFileType(string FileName)
{
string ext = FileName.Substring(FileName.LastIndexOf(".") + 1, FileName.Length - FileName.LastIndexOf(".") - 1);
for (int i = 0; i < AcceptedFileTypes.Length; i++)
{
if (ext.ToLower() == AcceptedFileTypes[i])
{
return true;

}
}
return false;
}

private string[] ReturnFilesArray()
{
if (CurrentImagesFolder.Value != "")
{
try
{
string AppPath = HttpContext.Current.Request.PhysicalApplicationPath;
string ImageFolderPath = AppPath + CurrentImagesFolder.Value;
string[] FilesArray = System.IO.Directory.GetFiles(ImageFolderPath, "*");
return FilesArray;
}
catch
{

return null;
}
}
else
{
return null;
}

}

private string[] ReturnDirectoriesArray()
{
if (CurrentImagesFolder.Value != "")
{
try
{
string AppPath = HttpContext.Current.Request.PhysicalApplicationPath;
string CurrentFolderPath = AppPath + CurrentImagesFolder.Value;
string[] DirectoriesArray = System.IO.Directory.GetDirectories(CurrentFolderPath, "*");
return DirectoriesArray;
}
catch
{
return null;
}
}
else
{
return null;
}
}

public void DisplayImages()
{
string[] FilesArray = ReturnFilesArray();
string[] DirectoriesArray = ReturnDirectoriesArray();
string AppPath = HttpContext.Current.Request.PhysicalApplicationPath;
string AppUrl;

//Get the application's URL
if (Request.ApplicationPath == "/")
AppUrl = Request.ApplicationPath;
else
AppUrl = Request.ApplicationPath + "/";

GalleryPanel.Controls.Clear();
if ((FilesArray == null || FilesArray.Length == 0) && (DirectoriesArray == null || DirectoriesArray.Length == 0))
{
gallerymessage.Text = NoImagesMessage + ": " + RootImagesFolder.Value;
}
else
{
string ImageFileName = "";
string ImageFileLocation = "";

int thumbWidth = 94;
int thumbHeight = 94;

if (CurrentImagesFolder.Value != RootImagesFolder.Value)
{

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";

string ParentFolder = CurrentImagesFolder.Value.Substring(0, CurrentImagesFolder.Value.LastIndexOf("/"));

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('" + RootImagesFolder.Value + "','" + ParentFolder.Replace("/", "//") + "');";
myImageHolder.Controls.Add(myHtmlImage);

System.Web.UI.WebControls.Panel myMainHolder = new System.Web.UI.WebControls.Panel();
myMainHolder.CssClass = "imagespacer";
myMainHolder.Controls.Add(myImageHolder);

System.Web.UI.WebControls.Panel myTitleHolder = new System.Web.UI.WebControls.Panel();
myTitleHolder.CssClass = "titleHolder";
myTitleHolder.Controls.Add(new LiteralControl("Up"));
myMainHolder.Controls.Add(myTitleHolder);

GalleryPanel.Controls.Add(myMainHolder);

}

foreach (string _Directory in DirectoriesArray)
{

try
{
string DirectoryName = _Directory.ToString();

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";

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('" + RootImagesFolder.Value + "','" + DirectoryName.Replace(AppPath, "").Replace("/", "//") + "');";
myImageHolder.Controls.Add(myHtmlImage);

System.Web.UI.WebControls.Panel myMainHolder = new System.Web.UI.WebControls.Panel();
myMainHolder.CssClass = "imagespacer";
myMainHolder.Controls.Add(myImageHolder);

System.Web.UI.WebControls.Panel myTitleHolder = new System.Web.UI.WebControls.Panel();
myTitleHolder.CssClass = "titleHolder";
myTitleHolder.Controls.Add(new LiteralControl(DirectoryName.Replace(AppPath + CurrentImagesFolder.Value + "/", "")));
myMainHolder.Controls.Add(myTitleHolder);

GalleryPanel.Controls.Add(myMainHolder);
}
catch
{
// nothing for error
}
}

foreach (string ImageFile in FilesArray)
{

try
{

ImageFileName = ImageFile.ToString();
ImageFileName = ImageFileName.Substring(ImageFileName.LastIndexOf("/") + 1);
ImageFileLocation = AppUrl;
ImageFileLocation = ImageFileLocation.Substring(ImageFileLocation.LastIndexOf("/") + 1);
//galleryfilelocation += "/";
ImageFileLocation += 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;

// landscape image
if (myImage.Width > myImage.Height)
{
if (myImage.Width > thumbWidth)
{
myHtmlImage.Width = thumbWidth;
myHtmlImage.Height = Convert.ToInt32(myImage.Height * thumbWidth / myImage.Width);
}
else
{
myHtmlImage.Width = myImage.Width;
myHtmlImage.Height = myImage.Height;
}
// portrait image
}
else
{
if (myImage.Height > thumbHeight)
{
myHtmlImage.Height = thumbHeight;
myHtmlImage.Width = Convert.ToInt32(myImage.Width * thumbHeight / myImage.Height);
}
else
{
myHtmlImage.Width = myImage.Width;
myHtmlImage.Height = myImage.Height;
}
}

if (myHtmlImage.Height < thumbHeight)
{
myHtmlImage.Attributes["vspace"] = Convert.ToInt32((thumbHeight / 2) - (myHtmlImage.Height / 2)).ToString();
}

System.Web.UI.WebControls.Panel myImageHolder = new System.Web.UI.WebControls.Panel();
myImageHolder.CssClass = "imageholder";
myImageHolder.Attributes["onclick"] = "divClick(this,'" + ImageFileName + "');";
myImageHolder.Attributes["ondblclick"] = "returnImage('" + ImageFileLocation.Replace("/", "/") + "','" + myImage.Width.ToString() + "','" + myImage.Height.ToString() + "');";
myImageHolder.Controls.Add(myHtmlImage);

System.Web.UI.WebControls.Panel myMainHolder = new System.Web.UI.WebControls.Panel();
myMainHolder.CssClass = "imagespacer";
myMainHolder.Controls.Add(myImageHolder);

System.Web.UI.WebControls.Panel myTitleHolder = new System.Web.UI.WebControls.Panel();
myTitleHolder.CssClass = "titleHolder";
myTitleHolder.Controls.Add(new LiteralControl(ImageFileName + "<BR>" + myImage.Width.ToString() + "x" + myImage.Height.ToString()));
myMainHolder.Controls.Add(myTitleHolder);

//GalleryPanel.Controls.Add(myImage);
GalleryPanel.Controls.Add(myMainHolder);

myImage.Dispose();
}
catch
{

}
}
gallerymessage.Text = "";
}
}
}

5、Default.aspx代码如下，注意document.getElementById("imgFace")是获得页面中的图片控件ImgFace用来显示选择的结果，document.getElementById("hideImgFace").value存放选择图片的路径

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="user_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<script language="javascript" type="text/javascript">
function InsertImageFromGallery()
{
imgArr = showModalDialog('SelectImage.aspx',window,'dialogWidth:460px; dialogHeight:360px;help:1;status:1;resizeable:0;');

if (imgArr != null)
{
imagestring = '<IMG SRC=' + imgArr['filename'] + ' HEIGHT=' + imgArr['height'] + ' WIDTH=' + imgArr['width'] + ' BORDER=0>';
document.getElementById("imgFace").src=imgArr['filename'];
document.getElementById("imgFace").HEIGHT=imgArr['height'];
document.getElementById("imgFace").WIDTH=imgArr['width'];
document.getElementById("hideImgFace").value=imgArr['filename'];
}
}
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="imgFace" runat="server" ImageUrl="~/images/face/8.gif" />
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="javascript：InsertImageFromGallery()">选择头像</asp:HyperLink>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" onClick="Button1_Click" />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label> <br />
<br />
<asp:HiddenField ID="hideImgFace" runat="server" />

</div>
</form>
</body>
</html>

6、Default.aspx.cs代码如下，测试获得的图片路径,以方便在不同场合用，注意hideImgFace.Value.Replace("/TestImgSelect","..");中TestImgSelect是自己的网站名称

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class user_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "图片路径："+hideImgFace.Value+"<br>相对路径："+hideImgFace.Value.Replace("/TestImgSelect","..");
}
}

7：运行效果如下，点选择头像，会弹出一个选择图片的窗口，双击图片则头像自动更改

zj1103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp.net2.0推荐一个功能强大的图片选择控件

在做网站的时候,很多情况用到图片上传与选择。FreeTextBox控件里用一个图片选择控件，我觉得很好，就单独拿出来用了。1、建立TestImgSelect网站，建立images文件夹，在images里建立face文件夹用来存放头像，图片如下：5.gif8.gif9.gif10.gi
复制链接

扫一扫

专栏目录