最终效果图:
当点击上传时:当选择.gif图片格式时:
当选择正确的图片格式时:
实现步骤:
首先:创建一个WebForm项目,右键添加,选择Web窗体母版页,用它默认的名字
第二步:
在母版页Site1.Master中去写通用的代码:如下图
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication3.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Content/layout.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<header class="header"></header>
<div class="main">
<aside class="menu"></aside>
<article class="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</article>
</div>
</form>
</body>
</html>
在Content的文件夹中新建一个css文件,命名为:layout.css
代码如下:
body,html,form{
height:100%;
display:flex;
flex-direction:column;
background-color:#ede8e8;
}
.header,.menu,.content{
background-color:white;
border:1px solid silver;
}
.header{
width:100%;
height:30px;
order:1;
}
.main{
display:flex;
width:100%;
flex:1;
order:2;
margin-top:10px;
}
.menu{
width:100px;
order:1;
}
.content{
flex:2;
order:2;
margin-left:10px;
height:100%;
}
第三步:添加包含母版页的Web窗体
命名为:UpLo.aspx
该Web窗体中的代码如下:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="UpLo.aspx.cs" Inherits="WebApplication3.UpLo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="Content/lo.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="page">
<div class="loginwarrp">
<div class="logo">头像上传</div>
<div class="login_form">
<ul>
<li class="login-item">
<span>选择头像:</span>
<asp:FileUpload ID="FileUpload1" runat="server" />
</li>
<li class="login-sub">
<asp:Button ID="btnOK" runat="server" Text="上传" OnClick="btnOK_Click" />
</li>
<li class="login-item">
<asp:Label ID="lblMessage" runat="server" Text="" ForeColor="#CC0000"></asp:Label>
</li>
<li class="login-item">
<asp:ImageButton ID="ImageUser" Width="50px" Height="50px" runat="server" title=""/>
</li>
</ul>
</div>
</div>
</div>
</asp:Content>
新建一个css样式:命名为lo.css:
代码如下:
ol,ul,li{
list-style:none;
}
.loginwarrp{
margin:50px auto;
width:400px;
padding:30px 50px;
background:#FFFFFF;
overflow:hidden;
font-size:14px;
font-family:'微软雅黑','文泉驿正黑','黑体';
}
.loginwarrp .logo{
width:100%;
height:44px;
line-height:44px;
font-size:20px;
text-align:center;
border-bottom:1px solid #ddd;
}
.loginwarrp .login_form{
margin-top:15px;
}
.loginwarrp .login_form .login-item{
padding:2px 8px;
border:1px solid #dedede;
border-radius:8px;
margin-top:10px;
}
.loginwarrp .login_form .login_input{
height:35px;
border:none;
line-height:35px;
width:200px;
font-size:14px;
outline:none;
}
.loginwarrp .login_form .verify{
float:left;
}
.loginwarrp .verify .verify_input{
width:160px;
}
.loginwarrp .verifyimg{
height:30px;
margin:20px 0 0 20px;
}
.loginwarrp .login-sub{
text-align:center;
}
.loginwarrp .login-sub input{
margin-top:15px;
background:#45B549;
line-height:35px;
width:150px;
color:#FFFFFF;
font-size:16px;
font-family:'微软雅黑','文泉驿正黑','黑体';
border:none;
border-radius:5px;
}
.loginwarrp .login_form .login-item .error{
color:#F00;
font-family:'微软雅黑','文泉驿正黑','黑体';
}
最后一步写后端的代码:
代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication3
{
public partial class UpLo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnOK_Click(object sender, EventArgs e)
{
//控件是否含有将要上传的文件
if (FileUpload1.HasFile)
{
//获取上传的文件名
string filename = FileUpload1.FileName;
//获取文件名的后缀
string filefix = filename.Substring(filename.LastIndexOf(".")+1).ToLower();
//进行判断,看上传的文件的后缀名是否为图片的格式
if (filefix != "png" && filefix != "jpg" && filefix != "pic" && filefix != "jpeg")
{
this.lblMessage.Text = "上传文件不是图片格式";
}
else
{
//SaveAs 将上传文件保存到服务器指定的路径
FileUpload1.SaveAs(Server.MapPath("~/Images/") + filename);
this.ImageUser.ImageUrl = "~/Images/" + filename;
this.lblMessage.Text = "头像上传成功";
}
}
}
}
}