在做网站的时候,很多情况用到图片上传与选择。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不能换，否则滚动条不正确 -->
<!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用来存放选择图片的路径
<! 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 >
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：运行效果如下，点选择头像，会弹出一个选择图片的窗口，双击图片则头像自动更改
1703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
