.net之 HtmlInputFile

预实现效果:(上传文件,此处为图片,去掉图片验证,可以上传其他文件)

 

页面代码:

代码

<% @ Page language = " c# "  Codebehind = " testAdd.aspx.cs "  AutoEventWireup = " false "  Inherits = " DevSec.DH.Ums.DH.school.testAdd "   %>
< HTML >
     < HEAD >
         < title > NewsEdit </ title >
         < meta  content ="False"  name ="vs_showGrid" >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
         
         </ LINK >
         < script  language ="javascript" >
         function  OnChanagePic()
        {
             var  fileImage  =  document.getElementById( " fileImage " );
             /*  判断文件的扩展名称  */
             var  extName  = " .gif,.bmp,.jpg,.png " ; 
             if (fileImage.value.length  !=   0 )
            {
                 var  fileExt  =  fileImage.value.substr(fileImage.value.length  -   4 ).toLowerCase();
                 // alert(extName.indexOf(fileExt));
                 if (extName.indexOf(fileExt)  ==   - 1 )
                {
                    alert( " 上传的文件不正确！\r\n\r\n上传的文件应为： "   +  extName  +   " ！ " );
                    window.event.returnValue  =   false ;
                     return   false ;                    
                }
                document.getElementById( " imgBrowser " ).src  =  fileImage.value;
            }
        }
        
         </ script >
     </ HEAD >
     < body >
         < form  id ="FormNewsEdit"  method ="post"  runat ="server" >
             < table  cellSpacing ="0"  cellPadding ="0"  width ="100%"  border ="0" >
                 
                 < tr >
                     < td  align ="center"  height ="26" >
                         < table  width ="100%"  border ="0"  class ="DataGrid" >
                              
                             < tr >
                                 < td  noWrap colSpan ="4"  height ="26" >
                                     < fieldset >
                                         < legend >
                                              选择图片 
                                         </ legend >
                                         < table  width ="100%" >
                                             < tr >
                                                 < td >< input  id ="fileImage"  style ="WIDTH:100%;CURSOR:hand"  onChange ="javascript:OnChanagePic();"
                                                        type ="file"  runat ="server"  class ="inputCss"  contentEditable ="false"  NAME ="fileImage" ></ td >
                                             </ tr >
                                             < tr >
                                                 < td  align ="center" >
                                                     < asp:image  id ="imgBrowser"  runat ="server"  ImageUrl ="default.jpg"  ImageAlign ="AbsMiddle"
                                                        ToolTip ="图片预览"  Width ="120"  Height ="90" ></ asp:image ></ td >
                                             </ tr >
                                         </ table >
                                     </ fieldset >
                                 </ td >
                             </ tr >
                             
                         </ table >
                     </ td >
                 </ tr >
                 < tr >
                     < td  vAlign ="bottom"  align ="center"  height ="30" >
                          < asp:Button  id ="btnOkContinue"  runat ="server"  Text ="保存并继续"  ActIndex ="1" >   </ asp:Button >  
                 </ tr >
             </ table >
             
         </ form >
     </ body >
</ HTML >

ps(说明):

(1)html的fieldset空间,类似panel框

     < fieldset >
         < legend >
              标题
         </ legend >
              内容
     </ fieldset >

(2)htmlInputFile,<input id="cs中定义的名称" type = "file">即可出现附带浏览按钮的input框

< input  id ="fileImage"  style ="WIDTH:100% CURSOR:hand"  onChange ="javascript:OnChanagePic();"    type ="file"  runat ="server"  class ="inputCss"  contentEditable ="false"  NAME ="fileImage" >

为此框,指定OnChanagePic()函数调用,验证是否为所想要的文件类型

(3) 页面中使用了img控件,以便用户浏览图片,可以根据页面情况修改图片长宽..

< asp:image  id ="imgBrowser"  runat ="server"  ImageUrl ="default.jpg"  ImageAlign ="AbsMiddle"     ToolTip ="图片预览"  Width ="120"  Height ="90" ></ asp:image >

在OnChanagePic()函数中,var fileImage = document.getElementById("fileImage");document.getElementById("imgBrowser").src = fileImage.value;设置img的图片地址..

(4)为img指定了默认图片ImageUrl="default.jpg",否则会显示各差号!

后台代码:

代码

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;

namespace  DevSec.DH.Ums.DH.school
{
     ///   <summary>
     ///  testAdd 的摘要说明。
     ///   </summary>
     public   class  testAdd : System.Web.UI.Page
    {
         protected  System.Web.UI.WebControls.Image imgBrowser;
         protected  System.Web.UI.WebControls.Button btnOkContinue;
         protected  System.Web.UI.HtmlControls.HtmlInputFile fileImage;
    
         private   void  Page_Load( object  sender, System.EventArgs e)
        {
             //  在此处放置用户代码以初始化页面
        }

         #region  Web 窗体设计器生成的代码
         override   protected   void  OnInit(EventArgs e)
        {
             //
             //  CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
             //
            InitializeComponent();
             base .OnInit(e);
        }
        
         ///   <summary>
         ///  设计器支持所需的方法 - 不要使用代码编辑器修改
         ///  此方法的内容。
         ///   </summary>
         private   void  InitializeComponent()
        {    
             this .btnOkContinue.Click  +=   new  System.EventHandler( this .btnOkContinue_Click);
             this .Load  +=   new  System.EventHandler( this .Page_Load);

        }
         #endregion
        
         ///   <summary>
         ///  保存按钮事件
         ///   </summary>
         ///   <param name="sender"></param>
         ///   <param name="e"></param>
         private   void  btnOkContinue_Click( object  sender, System.EventArgs e)
        {
              string  str_res  =   this .updateImage( this .fileImage);
             this .Response.Write( " <script> alert(' " + str_res + " ');</script> " );

        }

         ///   <summary>
         ///  客户端上传图片发至服务器指定文件夹
         ///  并获得保存至服务器的文件名称
         ///   </summary>
         ///   <param name="file"> 客户端HtmlInputFile控件的对象 </param>
         ///   <returns> 如果成功返回相对路径字符串否则为错误提示字符串 </returns>
         public   string  updateImage(System.Web.UI.HtmlControls.HtmlInputFile file) 
        {
             // 要验证的文件格式
             string  [] imgType  =   new   string [] {  " image/gif " ,  " image/pjpeg " ,  " image/png " ,  " image/bmp "  };
             int  i  =   0 ;
             bool  blean  =   false ;
             string  message  =   string .Empty;
    
             // 判断是否为Image类型文件
             while (i < imgType.Length)
            {
                 if (file.PostedFile.ContentType.Equals(imgType[i].ToString()))
                {
                    blean  =   true ;
                     break ;
                }
                 else   if (i  ==  (imgType.Length  -   1 ))
                {
                     break ;
                }
                 else
                {
                    i ++ ;
                }
            }
    
             // 对获得的路径进行分析处理 
             switch (blean)
            {
                 case   true :
                     // 服务器路径
                     string  serverpath  =  System.Web.HttpContext.Current.Server.MapPath( " . " ) + " // " ;
                     // 上传和返回(保存到数据库中)的路径
                     string  uppath  =   string .Empty,savepath  =   string .Empty;
                     // 创建图片新的名称
                     string  nameImg  =  DateTime.Now.ToString( " new " + " yyyyMMddHHmmss " );
                     // 获得上传图片的路径
                     string  strPath  =  file.Value;
                     // 获得上传图片的类型(后缀名)
                     string  type  =  strPath.Substring(strPath.LastIndexOf( " . " ) + 1 ).ToLower();
                     // 拼写数据库保存的相对路径字符串
                    savepath  =  nameImg  +   " . " +  type;
                     // 拼写上传图片的路径(假设放在项目下的uploads文件夹内,且假设uploads文件夹存在,否则报错)
                    uppath  =  System.Web.HttpContext.Current.Server.MapPath( " ~/ " );
                    uppath  +=   " uploads/ " ;
                    uppath  +=  nameImg  +   " . "   +  type;
                     // 上传图片
                    file.PostedFile.SaveAs(uppath);
                    message  =   " 上传成功,文件名: " + savepath;
                     break ;
                 case   false :
                    message  =   " 您上传的类型有错,请重新选择！ " ;
                     break ;
                 default : break ;
            }
             return  message;
        }
    }
}

ps:

(1)为页面按钮添加click事件,并调用方法 updateImage(fileImage),参数名称为HtmlInputFile的id

(2)主要方法:file.PostedFile.SaveAs(uppath); uppath为保存路径!

疑问::

上传的明明是jpg图片,而调用方法file.PostedFile.ContentType返回的确是image/pjpeg,不知道为啥?