图片上传生成缩略图,并使用JQuery 实现鼠标移动到缩略图显示相应的大图的例子!
代码
<head runat="server">
<script type="text/javascript" src="script/jquery-1.3.2-vsdoc2.js"></script>
<link href="css/btn.css" type="text/css" rel="Stylesheet" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUp" runat="server" CssClass="green1" />
<asp:Button ID="btnUp" runat="server" Text="上传" CssClass="green1"
onclick="btnUp_Click" /><br />
<asp:Panel ID="Panel1" runat="server" >
</asp:Panel>
<asp:Image ID="ImShow" runat="server" ImageUrl="Images/3f76deb8623b1.jpg" Width="300px" />
</div>
<script type="text/javascript">
var $ur = $("#ImShow").attr("src")
$("image[src*='ico']").hover(function() {
var $url =$(this).attr("src");
$("#ImShow").attr("src", $url);
}, function() {
$("#ImShow").attr("src", $ur);
});
</script>
</form>
</body>
</html>
<script type="text/javascript" src="script/jquery-1.3.2-vsdoc2.js"></script>
<link href="css/btn.css" type="text/css" rel="Stylesheet" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUp" runat="server" CssClass="green1" />
<asp:Button ID="btnUp" runat="server" Text="上传" CssClass="green1"
onclick="btnUp_Click" /><br />
<asp:Panel ID="Panel1" runat="server" >
</asp:Panel>
<asp:Image ID="ImShow" runat="server" ImageUrl="Images/3f76deb8623b1.jpg" Width="300px" />
</div>
<script type="text/javascript">
var $ur = $("#ImShow").attr("src")
$("image[src*='ico']").hover(function() {
var $url =$(this).attr("src");
$("#ImShow").attr("src", $url);
}, function() {
$("#ImShow").attr("src", $ur);
});
</script>
</form>
</body>
</html>
代码
public void QueryIco()
{
string path = Server.MapPath("~/Images");
DirectoryInfo dirinfo = new DirectoryInfo(Server.MapPath("~/ico"));
FileInfo[] files=dirinfo.GetFiles("*.jpg");
foreach (FileInfo file in files)
{
System.Web.UI.WebControls.Image im = new System.Web.UI.WebControls.Image();
im.ImageUrl = "ico/"+file.Name;
this.Panel1.Controls.Add(im);
if (Panel1.Controls.Count % 4==0)
{
//使Panel中动态换行
this.Panel1.Controls.Add(new LiteralControl("<BR>"));
}
}
}
protected void btnUp_Click(object sender, EventArgs e)
{
//得到上传的路径
string path = Server.MapPath("Images/");
//得到应用程序虚拟路径
// string path1 = ApplicationPath + "/Images/";
string path2=Server.MapPath("~/ico/");
string type = System.IO.Path.GetExtension(FileUp.FileName).ToLower();
if(FileUp.HasFile)
{
if (type != ".jpg")
{
Response.Write("<script>alert('文件类型不正确!')</script>");
}
else
{
string filename = this.FileUp.FileName;
if (FileUp.PostedFile.ContentLength > 1024 *2*1024)
{
Response.Write("<script>alert('文件不能大于2M!')</script>");
}
else
{
FileUp.SaveAs(path+FileUp.FileName);
this.ImShow.ImageUrl = "Images/" + FileUp.FileName;
MakeSmallImg(FileUp.PostedFile.InputStream, path2 + filename, 100, 200);
// Response.Write("<script>alert('"+path1+"!')</script>");
QueryIco();
}
}
}
}
// 按模版比例生成缩略图(以流的方式获取源文件)
//生成缩略图函数
//顺序参数:源图文件流、缩略图存放地址、模版宽、模版高
//注:缩略图大小控制在模版区域内
public static void MakeSmallImg(System.IO.Stream fromFileStream, string fileSaveUrl, System.Double templateWidth, System.Double templateHeight)
{
//从文件取得图片对象,并使用流中嵌入的颜色管理信息
System.Drawing.Image myImage = System.Drawing.Image.FromStream(fromFileStream, true);
//缩略图宽、高
System.Double newWidth = myImage.Width, newHeight = myImage.Height;
//宽大于模版的横图
if (myImage.Width > myImage.Height || myImage.Width == myImage.Height)
{
if (myImage.Width > templateWidth)
{
//宽按模版,高按比例缩放
newWidth = templateWidth;
newHeight = myImage.Height * (newWidth / myImage.Width);
}
}
//高大于模版的竖图
else
{
if (myImage.Height > templateHeight)
{
//高按模版,宽按比例缩放
newHeight = templateHeight;
newWidth = myImage.Width * (newHeight / myImage.Height);
}
}
//取得图片大小
System.Drawing.Size mySize = new Size((int)newWidth, (int)newHeight);
//新建一个bmp图片
System.Drawing.Image bitmap = new System.Drawing.Bitmap(mySize.Width, mySize.Height);
//新建一个画板
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(Color.White);
//在指定位置画图
g.DrawImage(myImage, new System.Drawing.Rectangle(0, 0, bitmap.Width, bitmap.Height),
new System.Drawing.Rectangle(0, 0, myImage.Width, myImage.Height),
System.Drawing.GraphicsUnit.Pixel);
///文字水印
//System.Drawing.Graphics G=System.Drawing.Graphics.FromImage(bitmap);
//System.Drawing.Font f=new Font("宋体",10);
//System.Drawing.Brush b=new SolidBrush(Color.Black);
//G.DrawString("myohmine",f,b,10,10);
//G.Dispose();
///图片水印
//System.Drawing.Image copyImage = System.Drawing.Image.FromFile(System.Web.HttpContext.Current.Server.MapPath("pic/1.gif"));
//Graphics a = Graphics.FromImage(bitmap);
//a.DrawImage(copyImage, new Rectangle(bitmap.Width-copyImage.Width,bitmap.Height-copyImage.Height,copyImage.Width, copyImage.Height),0,0, copyImage.Width, copyImage.Height, GraphicsUnit.Pixel);
//copyImage.Dispose();
//a.Dispose();
//copyImage.Dispose();
//保存缩略图
bitmap.Save(fileSaveUrl, System.Drawing.Imaging.ImageFormat.Jpeg);
g.Dispose();
myImage.Dispose();
bitmap.Dispose();
}
{
string path = Server.MapPath("~/Images");
DirectoryInfo dirinfo = new DirectoryInfo(Server.MapPath("~/ico"));
FileInfo[] files=dirinfo.GetFiles("*.jpg");
foreach (FileInfo file in files)
{
System.Web.UI.WebControls.Image im = new System.Web.UI.WebControls.Image();
im.ImageUrl = "ico/"+file.Name;
this.Panel1.Controls.Add(im);
if (Panel1.Controls.Count % 4==0)
{
//使Panel中动态换行
this.Panel1.Controls.Add(new LiteralControl("<BR>"));
}
}
}
protected void btnUp_Click(object sender, EventArgs e)
{
//得到上传的路径
string path = Server.MapPath("Images/");
//得到应用程序虚拟路径
// string path1 = ApplicationPath + "/Images/";
string path2=Server.MapPath("~/ico/");
string type = System.IO.Path.GetExtension(FileUp.FileName).ToLower();
if(FileUp.HasFile)
{
if (type != ".jpg")
{
Response.Write("<script>alert('文件类型不正确!')</script>");
}
else
{
string filename = this.FileUp.FileName;
if (FileUp.PostedFile.ContentLength > 1024 *2*1024)
{
Response.Write("<script>alert('文件不能大于2M!')</script>");
}
else
{
FileUp.SaveAs(path+FileUp.FileName);
this.ImShow.ImageUrl = "Images/" + FileUp.FileName;
MakeSmallImg(FileUp.PostedFile.InputStream, path2 + filename, 100, 200);
// Response.Write("<script>alert('"+path1+"!')</script>");
QueryIco();
}
}
}
}
// 按模版比例生成缩略图(以流的方式获取源文件)
//生成缩略图函数
//顺序参数:源图文件流、缩略图存放地址、模版宽、模版高
//注:缩略图大小控制在模版区域内
public static void MakeSmallImg(System.IO.Stream fromFileStream, string fileSaveUrl, System.Double templateWidth, System.Double templateHeight)
{
//从文件取得图片对象,并使用流中嵌入的颜色管理信息
System.Drawing.Image myImage = System.Drawing.Image.FromStream(fromFileStream, true);
//缩略图宽、高
System.Double newWidth = myImage.Width, newHeight = myImage.Height;
//宽大于模版的横图
if (myImage.Width > myImage.Height || myImage.Width == myImage.Height)
{
if (myImage.Width > templateWidth)
{
//宽按模版,高按比例缩放
newWidth = templateWidth;
newHeight = myImage.Height * (newWidth / myImage.Width);
}
}
//高大于模版的竖图
else
{
if (myImage.Height > templateHeight)
{
//高按模版,宽按比例缩放
newHeight = templateHeight;
newWidth = myImage.Width * (newHeight / myImage.Height);
}
}
//取得图片大小
System.Drawing.Size mySize = new Size((int)newWidth, (int)newHeight);
//新建一个bmp图片
System.Drawing.Image bitmap = new System.Drawing.Bitmap(mySize.Width, mySize.Height);
//新建一个画板
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(Color.White);
//在指定位置画图
g.DrawImage(myImage, new System.Drawing.Rectangle(0, 0, bitmap.Width, bitmap.Height),
new System.Drawing.Rectangle(0, 0, myImage.Width, myImage.Height),
System.Drawing.GraphicsUnit.Pixel);
///文字水印
//System.Drawing.Graphics G=System.Drawing.Graphics.FromImage(bitmap);
//System.Drawing.Font f=new Font("宋体",10);
//System.Drawing.Brush b=new SolidBrush(Color.Black);
//G.DrawString("myohmine",f,b,10,10);
//G.Dispose();
///图片水印
//System.Drawing.Image copyImage = System.Drawing.Image.FromFile(System.Web.HttpContext.Current.Server.MapPath("pic/1.gif"));
//Graphics a = Graphics.FromImage(bitmap);
//a.DrawImage(copyImage, new Rectangle(bitmap.Width-copyImage.Width,bitmap.Height-copyImage.Height,copyImage.Width, copyImage.Height),0,0, copyImage.Width, copyImage.Height, GraphicsUnit.Pixel);
//copyImage.Dispose();
//a.Dispose();
//copyImage.Dispose();
//保存缩略图
bitmap.Save(fileSaveUrl, System.Drawing.Imaging.ImageFormat.Jpeg);
g.Dispose();
myImage.Dispose();
bitmap.Dispose();
}