asp.net 自定义控件实现无刷新上传图片,立即显示缩略图,保存图片缩略图

如图:

点击浏览,选择图片之后,右面显示图片

第一步:

创建CtFileUpLoad.ascx


代码如下:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CtFileUpLoad.ascx.cs"
Inherits="WebParts_CtFileUpLoad" %>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe src="/WebParts/FileUpLoad.aspx?<%=ParsValue %>" width="240px" height="22px" frameborder="0" scrolling="no"></iframe>
</td>
<td>
<asp:TextBox runat="server" ID="tbFileName" style="display:none"></asp:TextBox>
<div id="dvImg" runat="server" style="position:absolute; margin-left:50px;">
</div>
</td>
</tr>
</table>
<script language="javascript">
function <%=ClientID %>CallLoaded()
{
<% =OnLoaded %>;
}
</script>

代码如下:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Drawing;
public partial class WebParts_CtFileUpLoad : System.Web.UI.UserControl
{
public bool AutoFileName
{
get
{
object ob = ViewState[ClientID + "AutoFileName"];
if (ob == null)
ob = true;
return (bool)ob;
}
set
{
ViewState[ClientID + "AutoFileName"] = value;
}
}
public string UpLoadPath
{
get
{
object ob = ViewState[ClientID + "UpLoadPath"];
if (ob == null)
ob = "UPLOADFILES";
return ob.ToString();
}
set
{
ViewState[ClientID + "UpLoadPath"] = value;
}
}
public string OnLoaded
{
get
{
object ob = ViewState[ClientID + "OnLoaded"];
if (ob == null)
ob = "";
return ob.ToString();
}
set
{
ViewState[ClientID + "OnLoaded"] = value;
}
}
public string SupportExtension
{
get
{
object ob = ViewState[ClientID + "SupportExtension"];
if (ob == null)
{
ob = "gif|png|jpeg|jpg";
}
return ob.ToString();
}
set
{
ViewState[ClientID + "SupportExtension"] = value.Replace(".", "");
}
}
public bool ShowImg
{
get
{
object ob = ViewState[ClientID + "ShowImg"];
if (ob == null)
ob = true;
return (bool)ob;
}
set
{
if ((bool)value)
dvImg.Style["display"] = "block";
else
dvImg.Style["display"] = "none";
}
}
public string FileName
{
get
{
return tbFileName.Text;
}
}
protected string ParsValue = "";
protected void Page_Load(object sender, EventArgs e)
{
ParsValue = "AutoFileName=" + AutoFileName.ToString() + "&SupportExtension=" + SupportExtension + "&UpLoadPath=" + UpLoadPath
+ "&ID=" + ClientID;
}
}

第二步:
创建FileUpLoad.aspx


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FileUpLoad.aspx.cs" Inherits="WebParts_FileUpLoad" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body style="margin:0px;">
<form id="form1" runat="server">
<div>
<asp:FileUpload runat="server" ID="FileUpload1" onchange="upload(this);" />
<asp:Button runat="server" ID="btUp" style="display:none" OnClick="btUp_Click" />
</div>
</form>
</body>
</html>
<script language="javascript">
function upload(ob)
{
var expStr=/.*(<%=SupportExtension%>)$/i;
if(!expStr.test(ob.value))
{
alert("上传文件类型有误。\n(支持文件类型:<%=SupportExtension%>)");
}
else
{
var btUp=document.getElementById("<%=btUp.ClientID %>");
btUp.click();
}
}
</script>

代码如下:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Drawing;
using System.IO;
public partial class WebParts_FileUpLoad : System.Web.UI.Page
{
protected string SupportExtension = "";
protected string UpLoadPath = "";
protected bool AutoFileName;
protected string ParentID = "";
protected void Page_Load(object sender, EventArgs e)
{
SupportExtension = Request.QueryString["SupportExtension"];
UpLoadPath = Request.QueryString["UpLoadPath"];
AutoFileName = bool.Parse(Request.QueryString["AutoFileName"].ToString());
ParentID = Request.QueryString["ID"].ToString();
}
protected void btUp_Click(object sender, EventArgs e)
{
Boolean fileOK = false;
if (FileUpload1.HasFile)
{
String fileExtension =
System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();
String[] allowedExtensions = SupportExtension.Split(new string[] { "|" }, StringSplitOptions.RemoveEmptyEntries);
for (int i = 0; i < allowedExtensions.Length; i++)
{
if (fileExtension == "." + allowedExtensions[i])
{
fileOK = true;
}
}
if (fileOK)
{
string path = "";
string name = "";
string sPath = "";
if (AutoFileName)
{
name = DateTime.Now.Ticks.ToString() + System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();
}
else
{
name = FileUpload1.FileName;
}
sPath = Request.PhysicalApplicationPath + "\\" + UpLoadPath + "\\";
path = sPath + name; //图片地址
string fileName = name; //文件名
string fileName_s = "s_" + name; //缩略图文件名称
try
{
//FileInfo file = new FileInfo(name);
// string fileContentType = FileUpload1.PostedFile.ContentType;
//string name = FileUpload1.PostedFile.FileName;//客户端文件路径
//string fileName_sy = "sy_" + file.Name; //水印图文件名称(文字)
//string fileName_syp = "syp_" + file.Name;//水印图文件名称(图片)
//string webFilePath = Server.MapPath(UpLoadPath + "\\" + fileName);
//string webFilePath_s = Server.MapPath(UpLoadPath + "\\" + fileName_s);
string webFilePath = sPath + fileName;//服务器端文件路径
string webFilePath_s = sPath + fileName_s;//服务器端缩略图路径

if (!File.Exists(webFilePath))
{
if (FileUpload1.PostedFile.ContentLength < 2 * 1024 * 1024) //如果图片小于2M
{
try
{
FileUpload1.SaveAs(path); //使用saveAS方法保存文件
System.Drawing.Image image = System.Drawing.Image.FromFile(path);
if (image.Width > 800 || image.Height > 600)
{
MakeThumbnail(webFilePath, webFilePath_s, 800, 600, "W");//生成缩略图的方法
}
else
{
MakeThumbnail(webFilePath, webFilePath_s, 300, 230, "W");//生成缩略图的方法
}
image.Dispose();
// AddShuiYinWord(webFilePath, webFilePath_sy); //保存水印文字图片
// AddShuiYinPic(webFilePath, webFilePath_syp, webFilePath_sypf);//保存添加水印图片之后的图片
//MakeThumbnail(webFilePath, webFilePath_s, 400, 300, "W");//生成缩略图的方法

Page.RegisterClientScriptBlock("succcess", @"<script>
alert('上传成功');
parent.document.getElementById('" + ParentID + "_" + "tbFileName" + @"').value='" + fileName_s + @"';
</script>");
}
catch (Exception ex)
{
Page.RegisterClientScriptBlock("err", "<script>alert('提示:文件上传失败,失败原因::" + ex.Message + "');</script>");
}
}
else
{
Page.RegisterClientScriptBlock("err", "<script>alert('提示:图片不能大于2M');</script>");
}
}
else
{
this.Page.RegisterClientScriptBlock("err", "<script>alert('图片重复');</script>");
}
}
catch (System.Exception err)
{
this.Page.RegisterClientScriptBlock("err", "<script>alert('" + err.Message + "');</script>");
}
try
{
Bitmap bmp = new Bitmap(path);
int width = 0, height = 0;
int dvalue = 200;
if (bmp.Width < dvalue & bmp.Height < 200)
{
width = bmp.Width;
height = bmp.Height;
}
else if (bmp.Width > bmp.Height)
{
width = dvalue;
height = dvalue * (bmp.Width / bmp.Height);
}
else
{
height = dvalue;
width = dvalue * (bmp.Height / bmp.Width);
}
this.Page.RegisterClientScriptBlock("show", @"<script>
parent.VarValue='" + UpLoadPath + "/" + fileName_s + "';" +
"parent." + ParentID + "CallLoaded();" +
"parent.document.getElementById('" + ParentID + "_" + "dvImg" + @"').innerHTML=""" +
"<img src='http://www.jb51.net/" + UpLoadPath + "/" + fileName_s + "' style='width:" + width.ToString() + "px; height:" + height + "px;'/>" + @""";
</script>");
bmp.Dispose();
}
catch
{
}
finally
{
//****判断该文件是否存在,如果存在,则删除图片
if (File.Exists(path))
{
//****删除用户客户端上传的图片,服务器上只保存缩略之后的图片
File.Delete(path);
}
}
}
else
{
this.Page.RegisterClientScriptBlock("err", "<script>alert('error');</script>");
}
}
}
/// <summary>
/// 生成缩略图
/// </summary>
/// <param name="originalImagePath">源图路径(物理路径)</param>
/// <param name="thumbnailPath">缩略图路径(物理路径)</param>
/// <param name="width">缩略图宽度</param>
/// <param name="height">缩略图高度</param>
/// <param name="mode">生成缩略图的方式</param>
public void MakeThumbnail(string originalImagePath, string thumbnailPath, int width, int height, string mode)
{
System.Drawing.Image originalImage = System.Drawing.Image.FromFile(originalImagePath);
int towidth = width;
int toheight = height;
int x = 0;
int y = 0;
int ow = originalImage.Width;
int oh = originalImage.Height;
switch (mode)
{
case "HW"://指定高宽缩放(可能变形)
break;
case "W"://指定宽,高按比例
toheight = originalImage.Height * width / originalImage.Width;
break;
case "H"://指定高,宽按比例
towidth = originalImage.Width * height / originalImage.Height;
break;
case "Cut"://指定高宽裁减(不变形)
if ((double)originalImage.Width / (double)originalImage.Height > (double)towidth / (double)toheight)
{
oh = originalImage.Height;
ow = originalImage.Height * towidth / toheight;
y = 0;
x = (originalImage.Width - ow) / 2;
}
else
{
ow = originalImage.Width;
oh = originalImage.Width * height / towidth;
x = 0;
y = (originalImage.Height - oh) / 2;
}
break;
default:
break;
}
//新建一个bmp图片
System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);
//新建一个画板
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);
//设置高质量插值法
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
//设置高质量,低速度呈现平滑程度
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
//清空画布并以透明背景色填充
g.Clear(System.Drawing.Color.Transparent);
//在指定位置并且按指定大小绘制原图片的指定部分
g.DrawImage(originalImage, new System.Drawing.Rectangle(0, 0, towidth, toheight),
new System.Drawing.Rectangle(x, y, ow, oh),
System.Drawing.GraphicsUnit.Pixel);
try
{
//以jpg格式保存缩略图
bitmap.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Jpeg);
}
catch (System.Exception e)
{
throw e;
}
finally
{
originalImage.Dispose();
bitmap.Dispose();
g.Dispose();
}
}
/// <summary>
/// 在图片上增加文字水印
/// </summary>
/// <param name="Path">原服务器图片路径</param>
/// <param name="Path_sy">生成的带文字水印的图片路径</param>
protected void AddShuiYinWord(string Path, string Path_sy)
{
string addText = "http://www.jb51.net";
System.Drawing.Image image = System.Drawing.Image.FromFile(Path);
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(image);
g.DrawImage(image, 0, 0, image.Width, image.Height);
System.Drawing.Font f = new System.Drawing.Font("Verdana", 16);
System.Drawing.Brush b = new System.Drawing.SolidBrush(System.Drawing.Color.Blue);
g.DrawString(addText, f, b, 15, 15);
g.Dispose();
image.Save(Path_sy);
image.Dispose();
}
/// <summary>
/// 在图片上生成图片水印
/// </summary>
/// <param name="Path">原服务器图片路径</param>
/// <param name="Path_syp">生成的带图片水印的图片路径</param>
/// <param name="Path_sypf">水印图片路径</param>
protected void AddShuiYinPic(string Path, string Path_syp, string Path_sypf)
{
System.Drawing.Image image = System.Drawing.Image.FromFile(Path);
System.Drawing.Image copyImage = System.Drawing.Image.FromFile(Path_sypf);
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(image);
g.DrawImage(copyImage, new System.Drawing.Rectangle(image.Width - copyImage.Width, image.Height - copyImage.Height, copyImage.Width, copyImage.Height), 0, 0, copyImage.Width, copyImage.Height, System.Drawing.GraphicsUnit.Pixel);
g.Dispose();
image.Save(Path_syp);
image.Dispose();
}
}

属性:
SupportExtension 自定义上传的格式,用"|"分隔;
UpLoadPath   自定义上传到服务器的文件夹;
AutoFileName  ture表示根据时间自动生成文件名,不会重复,false表示原来的图片名称,重复会覆盖.

转载请注明出处
2009-12-24 18:39:27 by 齐学佳

时间: 2009-12-31

asp.net上传图片并作处理水印与缩略图的实例代码

方法类: 复制代码 代码如下: upFileClass.cs 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.HtmlC

asp.net MVC实现无组件上传图片实例介绍

例子: 如我想上传一个图片到服务器端:asp页面 复制代码 代码如下: <form id="form1" runat="server" action="/bookIndex/fileUpLoad/(你准备处理的 ActionResult)" method="post" enctype="multipart/form-data"> <input type="file" i

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

本文为大家分享了fileupload控件实现上传图片后并进行预览图片的功能,并对web.config进行了配置,先看一下最终效果: 页面代码: <form id="form1" runat="server"> <div> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1&quo

asp.net上传图片到服务器方法详解

ASP.NET的FileUpload控件可用于上传文件到服务器.HoverTreeTop新增了一个"阅图"功能,图片就是用FileUpload上传的. 这里要说明的是上传图片限定文件名和文件大小等代码. 文件上传功能使用用户控件实现,在HoverTreePanel项目中的HTPanel\HControl\UCPictureAdd.ascx 控件, HoverTreeTop上传的图片文件暂时限定为jpg.png和gif.代码为: <asp:FileUpload runat=&quo

asp.net+FCKeditor上传图片显示叉叉图片无法显示的问题的解决方法

弄了半天也没有找到原因,然后又重新到网上下载几个,还是不行,郁闷坏了,最后结合其他编辑器的用法,才知道是配置文件夹中上传文件夹的路径写错了 比如要上传到项目的根目录下的UserFiles下面,web.config的配置如下: 复制代码 代码如下: <appSettings> <add key="FCKeditor:BasePath" value="~/FCKeditor" /> <add key="FCKeditor:User

asp.net UpdatePanel实现无刷新上传图片

1)前台 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

asp.net上传图片保存到数据库的代码

数据库:保存图片的数据格式 图象二进制数据储存字段前台: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadWork.aspx.cs" Inherits="meishuguan.UploadWork" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

ASP.net WebAPI 上传图片实例

复制代码 代码如下: [HttpPost] public Task<Hashtable> ImgUpload() {     // 检查是否是 multipart/form-data     if (!Request.Content.IsMimeMultipartContent("form-data"))         throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);     //文

ASP.NET FileUpload 上传图片实例

复制代码 代码如下: <table style="width: 100%"> <tr> <td> <asp:ValidationSummary ID="ValidationSummary1" runat="server" /> <br /> <asp:FileUpload ID="FileUpload1" runat="server" /&g

ASP.NET下上传图片到数据库,并且读出图片的代码(详细版)

首先在SQL Server中建立一个图片存储的数库表,ImageData Column为图象二进制数据储存字段,ImageContentType Column为图象文件类型记录字段,ImageDescription Column为储蓄图 象文件说明字段,ImageSize Column为储存图象文件长度字段,结构如下: 复制代码 代码如下: CREATE TABLE [dbo].[ImageStore] ( [ImageID] [int] IDENTITY (1, 1) NOT NULL , [

PHP上传图片到数据库并显示的实例代码

PHP上传图片到数据库并显示 1.创建数据表 CREATE TABLE ccs_image ( id int(4) unsigned NOT NULL auto_increment, description varchar(250) default NULL, bin_data longblob, filename varchar(50) default NULL, filesize varchar(50) default NULL, filetype varchar(50) default N

教你Asp.net下使用mysql数据库的步骤

1. 首先需要安装mysql, 我们下载地址: http://www.jb51.net/softs/2193.html 或者去mysql.com官网都可以,一路next,安装好后,有个简单配置,提示有个设置登录密码和服务名称, 默认localhost,用户名root,密码自己设置. 2. 安装了mysql数据库后,需要一个管理工具,就像sqlserver的SQL Server Management Studio一样,推荐使用Navicat for MySQL, 下载地址:http://www.j

asp.net下模态对话框关闭之后继续执行服务器端代码的问题

最近做一个从Access项目向 Asp.net + SqlServer迁移工作,其中遇到了这种情况,在Access窗体的一个按钮事件中,代码大体上是这么个功能:弹出模态对话框,在关闭对话框之后继续走一段数据库操作代码. 在Asp.net里弹出模态对话框容易,但是在模态对话框关闭之后还要继续执行服务器代码,这就要求当对话框关闭之后页面要立即提交.于是有了以下的解决方法. 在Web Form中拖入服务器端按钮,并假设此按钮ID为 btnComput,在隐藏页面的 Page_Load 中用代码中这样写

asp.net下文件上传和文件删除的代码

文件上传 HttpPostedFile postFile = Request.Files["imgFile"]; if(postFile.FileName!=String.Empty){        ex=postFile.FileName.Substring(postFile.FileName.LastIndexOf("."));        fileName= DateTime.Now.ToString("yyyyMMdd") + ex;

asp.net下常用的加密算法MD5、SHA-1应用代码

MD5 MD5的全称是Message-Digest Algorithm 5(信息-摘要算法),在90年代初由MIT Laboratory for Computer Science和RSA Data Security Inc的Ronald L. Rivest开发出来,经MD2.MD3和MD4发展而来.是一种不可逆的加密算法,目前是最牢靠的加密算法之一,尚没有能够逆运算的程序被开发出来,它对应任何字符串都可以加密成一段唯一的固定长度的代码. 特性: 首先,它不可逆,没有系统的方法可以知道MD5码原来

asp.net(c#)实现从sqlserver存取二进制图片的代码

下面说说主要实现思路: 1.存取图片 (1).将图片文件转换为二进制并直接存进sql server 复制代码 代码如下: //UploadHelper.cs /// <summary> /// 将图片转化为长二进制 /// </summary> /// <param name="photopath"></param> /// <returns></returns> public static Byte[] SetI

asp下轻松实现将上传图片到数据库的代码

轻松实现将上传图片到数据库 很久就想自己写一写程序了,不过由于赖就不想写我,今天刚好有空,所以写了这个小小的程序很容易一看就知道的,不多说了就此开始: 我们做一个上传的.数据据库的字段就id自动编号 big 字段类型是 OLE 呵呵就简单的那个字段好了 uppic.asp上传程序名 <% dim rs  dim formsize,formdata,bncrlf,divider,datastart,dataend,mydata formsize=request.totalbytes '取得客户端发

ASP下使用Access数据库需要注意的18条安全法则

1.首先,我们需要过滤所有客户端提交的内容,其中包括?id=N一类,另外还有提交的html代码中的操作数据库的select及asp文件操作语法,大家可以把提交的字符转义,然后再存入数据库. 2.然后需要对访问Access数据库的页面进行授权,针对显示数据页面只能使用select语句,过滤其他的update,asp文件则分为许可访问数据库页面和限制访问页. 3.修改数库据连接文件名conn.asp为类似123ljuvo345l3kj34534v.asp文件. 4.修改数据库名为类似q397d039

asp.net下gridview 批量删除的实现方法第1/3页

要实现的效果很简单,看下图片: 功能:选中CheckBox,后从数据库中删除选中项.文章侧重将如何实现批量删除,对于如何链接数据库和绑定数据不做详细解释. 1 我们先要在GridView中添加一列为CheckBox.代码如下: 复制代码 代码如下: <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">  <Columns>