asp.net fileupload控件上传图片并预览图片

 更新时间:2015年11月07日 15:56:08   作者:小夜星  
这篇文章主要介绍了asp.net fileupload控件上传图片后并进行预览图片的功能,需要的朋友可以参考下

本文为大家分享了fileupload控件实现上传图片后并进行预览图片的功能,并对web.config进行了配置,先看一下最终效果:

页面代码:

 <form id="form1" runat="server">
 <div>
 <asp:FileUpload ID="FileUpload1" runat="server" />
 <asp:Button ID="Button1" runat="server" Text="上传" Width="54px" OnClick="Button1_Click" />
 <asp:Label ID="Label1" runat="server" Text="" Style="color: Red"></asp:Label>
 <asp:Image runat="server" ID="Image1" Style="z-index: 102; left: 20px; position: absolute;
  top: 49px" Width="73px" />
 </div>
 </form>

后台代码:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace Web.File
{
 public partial class WebForm1 : System.Web.UI.Page
 {
 protected void Page_Load(object sender, EventArgs e)
 {

 }
 #region 文件上传
 /// <summary>
 /// 文件上传
 /// </summary>
 protected void Button1_Click(object sender, EventArgs e)
 {
  if (FileUpload1.FileName == "")
  {
  this.Label1.Text = "上传文件不能为空";
  return;
  }

  bool fileIsValid = false;
  //如果确认了上传文件,则判断文件类型是否符合要求 
  if (this.FileUpload1.HasFile)
  {
  //获取上传文件的后缀 
  String fileExtension = System.IO.Path.GetExtension(this.FileUpload1.FileName).ToLower();
  String[] restrictExtension = { ".gif", ".jpg", ".bmp", ".png" };
  //判断文件类型是否符合要求 
  for (int i = 0; i < restrictExtension.Length; i++)
  {
   if (fileExtension == restrictExtension[i])
   {
   fileIsValid = true;
   }
   //如果文件类型符合要求,调用SaveAs方法实现上传,并显示相关信息 
   if (fileIsValid == true)
   {
   //上传文件是否大于10M
   if (FileUpload1.PostedFile.ContentLength > (10 * 1024 * 1024))
   {
    this.Label1.Text = "上传文件过大";
    return;
   }
   try
   {
    this.Image1.ImageUrl = "~/File/" + FileUpload1.FileName;
    this.FileUpload1.SaveAs(Server.MapPath("~/File/") + FileUpload1.FileName);
    this.Label1.Text = "文件上传成功!";
   }
   catch
   {
    this.Label1.Text = "文件上传失败!";
   }
   finally
   {

   }
   }
   else
   {
   this.Label1.Text = "只能够上传后缀为.gif,.jpg,.bmp,.png的文件";
   }
  }
  }
 }
 #endregion
 }
}

Web.config 配置:

<!--因为FileUpload 控件上传最大为4M,如果要上传更大文件,改下maxRequestLength的大小-->
<configuration>
 <system.web>
 <compilation debug="true" targetFramework="4.0" />
 <httpRuntime requestValidationMode="2.0" maxRequestLength="10485760" executionTimeout="3600" appRequestQueueLimit="10000"/>
 </system.web>
</configuration>

为大家附3个精彩的专题:

ASP.NET控件使用手册

ASP.NET数据绑定控件使用汇总

ASP.NET控件使用汇总

亲,你可以在自己的项目中实现fileupload控件上传图片并进行预览图片的功能,这样网站更具有实用性,基本步骤就是这些,可能还有小编遗漏的地方,希望大家谅解。

相关文章

  • ASP.NET MVC HtmlHelper如何扩展

    ASP.NET MVC HtmlHelper如何扩展

    ASP.NET MVC 中HtmlHelper方法为我们提供很多html标签,只需在页面调用就行了,但是微软并没有把所有的html标签都对应有了扩展方法,需要我们自定义HtmlHelper,来满足我们需要。
    2016-05-05
  • asp.net生成验证码(纯数字)

    asp.net生成验证码(纯数字)

    前几天写了个数字与字母混合的验证码技术,今天写个纯数字的验证码。这里先写个类
    2012-06-06
  • 用.NET如何生成二维码

    用.NET如何生成二维码

    二维码是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的,下面介绍一下如何用.NET生成二维码(QR Code码制),需要的朋友可以参考下
    2015-10-10
  •  ASP.NET Core 模型验证过滤器的两种实现方法

     ASP.NET Core 模型验证过滤器的两种实现方法

     在.Net Core的时代中,框架会帮你自动验证,本文主要介绍了 ASP.NET Core 模型验证过滤器的两种实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • ASP.NET三层架构详解 如何实现三层架构

    ASP.NET三层架构详解 如何实现三层架构

    这篇文章主要为大家详细介绍了ASP.NET三层架构,如何实现三层架构,本文为大家揭晓,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • asp.net中一款极为简单实用的图表插件(jquery)

    asp.net中一款极为简单实用的图表插件(jquery)

    这里介绍一款简单实用的图表插件,该图表插件是基于jquery和jquery的插件 gchart很容易实现的,而gchart插件是封装了google的图表api 。
    2011-07-07
  • Linux(Ubuntu)下搭建ASP.NET Core环境

    Linux(Ubuntu)下搭建ASP.NET Core环境

    本文给大家介绍的是无需安装mono,在Linux(Ubuntu14.04.4 LTS)下搭建ASP.NET Core环境 继续.NET跨平台,希望对大家能够有所帮助。
    2016-07-07
  • Asp.Net其他页面如何调用Web用户控件写的分页

    Asp.Net其他页面如何调用Web用户控件写的分页

    这篇文章主要介绍了Asp.Net其他页面如何调用Web用户控件写的分页,需要的朋友可以参考下
    2014-05-05
  • .net core使用redis基于StackExchange.Redis

    .net core使用redis基于StackExchange.Redis

    这篇文章主要为大家详细介绍了.net core使用redis基于StackExchange.Redis的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Visual Studio 2017如何用正则修改部分内容详解

    Visual Studio 2017如何用正则修改部分内容详解

    这篇文章主要给大家介绍了关于Visual Studio 2017如何用正则修改部分内容的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-05-05

最新评论