在做网站的时候,很多情况用到图片上传与选择。FreeTextBox控件里用一个图片选择控件，我觉得很好，就单独拿出来用了。
1、建立TestImgSelect网站，建立images文件夹，在images里建立face文件夹用来存放头像，图片如下：
\n
\n
\n
| \n
| \n
| \n
|
\n 5.gif | \n 8.gif | \n 9.gif | \n 10.gif |
\n
2、建立user文件夹，在里面建立SelectImage.aspx文件和Default.aspx文件
3、SelectImage.aspx代码如下：
\n
\n
<%@ 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>
\n
\n