asp.net 自定義控件實(shí)現(xiàn)無(wú)刷新上傳圖片,立即顯示縮略圖,保存圖片縮略圖
如圖:
點(diǎn)擊瀏覽,選擇圖片之后,右面顯示圖片
第一步:
創(chuàng)建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;
}
}
第二步:
創(chuàng)建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;//服務(wù)器端文件路徑
string webFilePath_s = sPath + fileName_s;//服務(wù)器端縮略圖路徑
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('圖片重復(fù)');</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.dbjr.com.cn/" + UpLoadPath + "/" + fileName_s + "' style='width:" + width.ToString() + "px; height:" + height + "px;'/>" + @""";
</script>");
bmp.Dispose();
}
catch
{
}
finally
{
//****判斷該文件是否存在,如果存在,則刪除圖片
if (File.Exists(path))
{
//****刪除用戶客戶端上傳的圖片,服務(wù)器上只保存縮略之后的圖片
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;
}
//新建一個(gè)bmp圖片
System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);
//新建一個(gè)畫(huà)板
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);
//設(shè)置高質(zhì)量插值法
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
//設(shè)置高質(zhì)量,低速度呈現(xiàn)平滑程度
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
//清空畫(huà)布并以透明背景色填充
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">原服務(wù)器圖片路徑</param>
/// <param name="Path_sy">生成的帶文字水印的圖片路徑</param>
protected void AddShuiYinWord(string Path, string Path_sy)
{
string addText = "http://www.dbjr.com.cn";
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">原服務(wù)器圖片路徑</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 自定義上傳到服務(wù)器的文件夾;
AutoFileName ture表示根據(jù)時(shí)間自動(dòng)生成文件名,不會(huì)重復(fù),false表示原來(lái)的圖片名稱,重復(fù)會(huì)覆蓋.
轉(zhuǎn)載請(qǐng)注明出處
2009-12-24 18:39:27 by 齊學(xué)佳
- asp.net fileupload控件上傳圖片并預(yù)覽圖片
- ASP.net WebAPI 上傳圖片實(shí)例
- asp.net上傳圖片并作處理水印與縮略圖的實(shí)例代碼
- asp.net MVC實(shí)現(xiàn)無(wú)組件上傳圖片實(shí)例介紹
- asp.net+FCKeditor上傳圖片顯示叉叉圖片無(wú)法顯示的問(wèn)題的解決方法
- ASP.NET下上傳圖片到數(shù)據(jù)庫(kù),并且讀出圖片的代碼(詳細(xì)版)
- asp.net上傳圖片保存到數(shù)據(jù)庫(kù)的代碼
- asp.net UpdatePanel實(shí)現(xiàn)無(wú)刷新上傳圖片
- ASP.NET FileUpload 上傳圖片實(shí)例
- asp.net上傳圖片到服務(wù)器方法詳解
相關(guān)文章
asp.net repeater實(shí)現(xiàn)批量刪除時(shí)注冊(cè)多選框id到客戶端
repeater批量刪除時(shí)注冊(cè)多選框id到客戶端的實(shí)現(xiàn)代碼2008-11-11Asp.net實(shí)現(xiàn)無(wú)刷新調(diào)用后臺(tái)實(shí)體類數(shù)據(jù)并以Json格式返回
本文主要分享了Asp.net實(shí)現(xiàn)無(wú)刷新調(diào)用后臺(tái)實(shí)體類數(shù)據(jù)并以Json格式返回的具體實(shí)例方法,具有一定的參考價(jià)值,有需要的朋友可以看下2016-12-12asp.net core 集成swagger ui的原理解析
本文主要講解了如何對(duì)API進(jìn)行分組,這里僅僅是舉了一個(gè)按照API功能進(jìn)行分組的例子,其實(shí)在實(shí)際開(kāi)發(fā)中,要按照何種方式分組,可以按照需求靈活定義,比如按照API版本進(jìn)行分組2021-10-10asp.net URL重寫(xiě)簡(jiǎn)化版 速學(xué)URL重寫(xiě)
asp.net URL重寫(xiě)(URLRewriter)簡(jiǎn)化版 。速學(xué)URL重寫(xiě)2010-01-01Web.config(應(yīng)用程序的配置信息)總結(jié)
Web.config文件是一個(gè)XML文本文件,它用來(lái)儲(chǔ)存 ASP.NET Web 應(yīng)用程序的配置信息(如最常用的設(shè)置ASP.NET Web 應(yīng)用程序的身份驗(yàn)證方式),它可以出現(xiàn)在應(yīng)用程序的每一個(gè)目錄中,接下來(lái)詳細(xì)介紹一下配置情況,感興趣的朋友可以了解下2013-01-01ASP.NET調(diào)用WebService服務(wù)的方法詳解
這篇文章主要介紹了ASP.NET調(diào)用WebService服務(wù)的方法,較為詳細(xì)的分析了WebService服務(wù)的功能,創(chuàng)建步驟與使用方法,需要的朋友可以參考下2016-05-05visual studio 2012安裝配置方法圖文教程 附opencv配置教程
這篇文章主要為大家分享了visual studio 2012安裝配置方法圖文教程,文中附opencv配置教程,文中安裝步驟介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05