在页面上添加一个客户端的File Field和Image控件,然后右击File Field控件，使它作为服务端的控件运行主要实现将图片上传到服务器上的一个文件夹下（这里的保存图片的文件夹名为UpImages），而在数据库里保存图片的名称，图片名在上传时改为当前的时间，这样在图片多的时候不至于重复而覆盖掉原来的图片，还控制了图片的大小，在你选择正确的图片时，图片将显示在IMAGE控件里。
在这个实例中有一个点问题，就是在你选择的文件不是正确的图片后缀名的时候弹出一个对话框后，为什么document.getElementById("myFile").value=""这句话不能清空File Field里的内容，所以在服务器端又进行了一次判断，如果哪位有高见，希望发表评论，谢谢。
在以后显示图片的时候，取出图片名称，然后根据图片路径就可以把图片显示在页面上，在DataGrid中显示图片也是一样的。
例：模板列里的图片的显示，还有点击图片可以跳转到相应的页面
1<a href='```
2# DataBinder.Eval(Container,"DataItem.homepage")
3```' target="_blank"><img alt="" border="0" height="100" src='UpImages/```
4# DataBinder.Eval(Container,"DataItem.imagename")
5```' width="100"/></a>
HTML端的代码：
1<body ms_positioning="GridLayout">
2<script>
3function checkData()
4{
5var fileName=document.getElementById("myFile").value;
6if(fileName=="")
7return;
8var exName=fileName.substr(fileName.lastIndexOf(".")+1).toUpperCase()
9//alert(exName)
10if(exName=="JPG"||exName=="BMP"||exName=="GIF")
11{
12document.getElementById("myimg").src=fileName
13}
14else
15{
16alert("请选择正确的图片文件")
17document.getElementById("myFile").value=""
18}
19}
20</script>
21<form id="Form1" method="post" runat="server">
22<table align="center" border="1" width="80%">
23<tr>
24<td align="center" height="30"><font style="FONT-SIZE: 10pt">图片：</font></td>
25<td height="30"> <input id="myFile" name="myFile" onchange="checkData()" runat="server" size="34" type="file"/>
26 <img alt="" height="125" id="myimg" src="" width="125"/><font style="FONT-SIZE: 10pt">（图片文件不大于200K）</font></td>
27</tr>
28<tr>
29<td align="center" colspan="2">
30<asp:button cssclass="redButtonCss" id="btnSubmit" runat="server" text="确定" width="77px"></asp:button></td>
31</tr>
32</table>
33</form>
34</body>
服务器端的提交事件
private void btnSubmit_Click(object sender, System.EventArgs e)
{
string strImageName="";
string FileName=myFile.Value;
string Publishtime=DateTime.Now.ToString();
if(FileName=="")//当没有图片时，保存到数据库里的图片名为空
{
bool result=DUI.Insert_UpImage(strImageName,Publishtime);//此为保存图片到数据库中的方法
if(result)
{
Response.Write("
1<script>alert('图片保存成功')</script>
");
Response.Write("
1<script>location.href=location.href</script>
");
}
}
else
{
string exName=FileName.Substring(FileName.LastIndexOf(".")+1).ToUpper();//截取图片的后缀名
if(exName=="JPG"||exName=="BMP"||exName=="GIF")
{
if(myFile.PostedFile.ContentLength>204800)//判断图片是否大于200k
{
Response.Write("
1<script>alert('对不起，你上传的图片太大，请转换后上传')</script>
");
return;
}
//根据时间生成图片名
string SaveName=DateTime.Now.ToString("yyyyMMddhhmmssfff");
string fn=myFile.PostedFile.FileName;
strImageName=SaveName+fn.Substring(fn.LastIndexOf("."));//图片名加上图片后缀名
string strpath=Server.MapPath("")+" \\UpImages\"+strImageName;// 得到将要保存图片的路径
myFile.PostedFile.SaveAs(strpath);//把图片保存在此路径中
bool result=DUI.Insert_UpImage(strImageName,Publishtime);//此为保存图片到数据库中的方法
if(result)
{
Response.Write("
1<script>alert('图片录入成功')</script>
");
Response.Write("
1<script>location.href=location.href</script>
");
}
}
else
{
Response.Write("
1<script>alert('请选择正确的图片文件')</script>
");
return;
}
}
}