您的位置：首页 > Web前端 > JQuery

图片上传生成缩略图，并使用JQuery实现鼠标移动到缩略图显示相应的大图的例子

2010-05-11 15:34 1281 查看

代码
HTML code

<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>

代码
C# code

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("
"));
}

}

}

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("");
}
else
{

string filename = this.FileUp.FileName;
if (FileUp.PostedFile.ContentLength > 1024 *2*1024)
{
Response.Write("");
}
else
{
FileUp.SaveAs(path+FileUp.FileName);
this.ImShow.ImageUrl = "Images/" + FileUp.FileName;
MakeSmallImg(FileUp.PostedFile.InputStream, path2 + filename, 100, 200);

//   Response.Write("");
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();
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航