.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框

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

为此框,指定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,不知道为啥?