在这个实例中有一个点问题，就是在你选择的文件不是正确的图片后缀名的时候弹出一个对话框后，为什么document.getElementById("myFile").value=""这句话不能清空File Field里的内容，所以在服务器端又进行了一次判断，如果哪位有高见，希望发表评论，谢谢。
在以后显示图片的时候，取出图片名称，然后根据图片路径就可以把图片显示在页面上，在DataGrid中显示图片也是一样的。
例：模板列里的图片的显示，还有点击图片可以跳转到相应的页面
<A href='<%# DataBinder.Eval(Container,"DataItem.homepage")%>' target=_blank><IMG height=100 alt="" src='UpImages/<%# DataBinder.Eval(Container,"DataItem.imagename")%>' width=100 border=0></A>
HTML端的代码：
<body MS_POSITIONING="GridLayout">
<script>
function checkData()
{
var fileName=document.getElementById("myFile").value;
if(fileName=="")
return;
var exName=fileName.substr(fileName.lastIndexOf(".")+1).toUpperCase()
//alert(exName)
if(exName=="JPG"||exName=="BMP"||exName=="GIF")
{
document.getElementById("myimg").src=fileName
}
else
{
alert("请选择正确的图片文件")
document.getElementById("myFile").value=""
}
}
</script>
<form id="Form1" method="post" runat="server">
<table align="center" border="1" width="80%">
<tr>
<td align="center" height="30"><font style="FONT-SIZE: 10pt">图片：</font></td>
<td height="30"> <INPUT id="myFile" type="file" onchange="checkData()" size="34" runat="server" NAME="myFile">
<IMG id="myimg" height="125" alt="" src="" width="125"><font style="FONT-SIZE: 10pt">（图片文件不大于200K）</font></td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button id="btnSubmit" runat="server" Text="确定" Width="77px" CssClass="redButtonCss"></asp:Button></td>
</tr>
</table>
</form>
</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("<script>alert('图片保存成功')</script>");
Response.Write("<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("<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("<script>alert('图片录入成功')</script>");
Response.Write("<script>location.href=location.href</script>");
}
}
else
{
Response.Write("<script>alert('请选择正确的图片文件')</script>");
return;
}
}
}
第一列是一个小图示, 第二列显示数据, 这样比单纯显示数据要漂亮许多.
在GridView 里显示图片, 大抵有两种办法:
<1>添加 ImageField , 绑定到数据源的某一列.
<2>编辑模板, 添加一个带Image 的列.
以下详述两种方法:
<1>添加一个gridview 到页面, 点选它的任务菜单"编辑列", 在弹出的编辑框中, 选择ImageField 并点击添加, 然后选中刚刚添加的列, 右侧面板会显示出它的属性, 在DataImageUrlField 属性中, 填入数据表中的列名. 
代码:
<asp:GridView ID="GridView1" runat="server"> <Columns> <asp:ImageField DataImageUrlField="img"> </asp:ImageField> </Columns> </asp:GridView>
然后编辑后台代码:
DataTable dt = new DataTable(); DataColumn dc =new DataColumn(); dt.Columns.Add(dc); dc= new DataColumn("img"); dt.Columns.Add(dc); DataRow dr = dt.NewRow(); dr[0] = "11111111111111111"; dr[1] = ResolveUrl("~/ok.gif"); dt.Rows.Add(dr); dr = dt.NewRow(); dr[0] = "22222222222222222"; dr[1] = ResolveUrl("~/ok.gif"); dt.Rows.Add(dr); GridView1.DataSource = dt; GridView1.DataBind();
编译运行, 就会看到第一幅图片的效果.
<2>编辑模板.
先编辑前台代码:
<asp:GridView ID="GridView1" runat="server"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:Image ID="img1" ImageUrl='<%#Eval("img") %>' runat="server" AlternateText="image lost" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>
与第一种方式相仿, 它最终的实现机制也是去检索数据源的列名, 所以在Eval 里面, 以字符串的方式给出包含图片url 的列名, 后台代码不变. 最终效果与第一种方式同.
木刀认为: 在目前讨论的情况下, 第一种实现方法似乎更好一些, 不过xxField 控件终究有限, 如果要往里面放其它控件, 就只得借助于模板了, 所以第二种方式是更通用, 更强大的选择.
---------------------------------------------
来源：https://www.cnblogs.com/superstar/archive/2010/03/02/1676845.html