使用客户端的File Field控件上传图片

最新推荐文章于 2022-03-09 20:07:06 发布

juhengfei

最新推荐文章于 2022-03-09 20:07:06 发布

阅读量370

点赞数

分类专栏： C# 文章标签： file string 数据库 datagrid server border

C# 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

在页面上添加一个客户端的File Field和Image控件,然后右击File Field控件，使它作为服务端的控件运行主要实现将图片上传到服务器上的一个文件夹下（这里的保存图片的文件夹名为UpImages），而在数据库里保存图片的名称，图片名在上传时改为当前的时间，这样在图片多的时候不至于重复而覆盖掉原来的图片，还控制了图片的大小，在你选择正确的图片时，图片将显示在IMAGE控件里。
在这个实例中有一个点问题，就是在你选择的文件不是正确的图片后缀名的时候弹出一个对话框后，为什么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" οnchange="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;
    }
   }
}