鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > 网站制作教程 > ASP.NET > >

模拟QQ心情图片上传预览示例

来源:互联网 作者:佚名 时间:2013-09-16 08:19
目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,先粘上以下插件,感兴趣的朋友可以参考下
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览。

先粘上以下插件,在别的图片上传功能说不定各位能用的上。

1、jQuery File Upload

Demo地址:
优点是使用jquery进行图片的异步上传,可控性好,可根据自己的需求任意定制;
缺点是在IE9等一些浏览器中,不支持图片预览,图片选择框中不支持多文件选择(这点是我抛弃它的原因);

2、CFUpdate

Demo地址:
优点:使用js+flash实现,兼容所有浏览器,优点界面效果还可以,支持批量上传、支持预览、进度条、删除等功能,,作为图片的上传控件非常好用;
缺点:定制型插件,只能修改颜色,样式已经固定死了;

3、SWFUpload

下载地址:
中文文档帮助地址:#uploadError
本文所使用的就是此插件,使用flash+jquery实现,可以更改按钮及各种样式;监听事件也很全。

以下贴出源码及设计思路,主要功能点包括:
1、图片的上传预览(先将图片上传至服务器,然后再返回地址预览,目前抛开html5比较靠谱的预览方式)
2、缩略图的产生(等比例缩放后再截取中间区域作为缩略图,类似QQ空间的做法,不过貌似QQ空间加入了人脸识别的功能)

以下是此次实现的功能截图:

 
1、Thumbnail.cs

复制代码 代码如下:


public class Thumbnial
{
/// <summary>
/// 生成缩略图
/// </summary>
/// <param>原图片</param>
/// <param>缩略图宽度</param>
/// <param>缩略图高度</param>
/// <param>是否裁剪(以中心点)</param>
/// <returns></returns>
public static Image GetThumbnail(System.Drawing.Image imgSource, int newWidth, int newHeight, bool isCut)
{
int rWidth = 0; // 等比例缩放后的宽度
int rHeight = 0; // 等比例缩放后的高度
int sWidth = imgSource.Width; // 原图片宽度
int sHeight = imgSource.Height; // 原图片高度
double wScale = (double)sWidth / newWidth; // 宽比例
double hScale = (double)sHeight / newHeight; // 高比例
double scale = wScale < hScale ? wScale : hScale;
rWidth = (int)Math.Floor(sWidth / scale);
rHeight = (int)Math.Floor(sHeight / scale);
Bitmap thumbnail = new Bitmap(rWidth, rHeight);
try
{
// 如果是截取原图,并且原图比例小于所要截取的矩形框,那么保留原图
if (!isCut && scale <= 1)
{
return imgSource;
}

using (Graphics tGraphic = Graphics.FromImage(thumbnail))
{
tGraphic.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; /* new way */
Rectangle rect = new Rectangle(0, 0, rWidth, rHeight);
Rectangle rectSrc = new Rectangle(0, 0, sWidth, sHeight);
tGraphic.DrawImage(imgSource, rect, rectSrc, GraphicsUnit.Pixel);
}

if (!isCut)
{
return thumbnail;
}
else
{
int xMove = 0; // 向右偏移(裁剪)
int yMove = 0; // 向下偏移(裁剪)
xMove = (rWidth - newWidth) / 2;
yMove = (rHeight - newHeight) / 2;
Bitmap final_image = new Bitmap(newWidth, newHeight);
using (Graphics fGraphic = Graphics.FromImage(final_image))
{
fGraphic.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; /* new way */
Rectangle rect1 = new Rectangle(0, 0, newWidth, newHeight);
Rectangle rectSrc1 = new Rectangle(xMove, yMove, newWidth, newHeight);
fGraphic.DrawImage(thumbnail, rect1, rectSrc1, GraphicsUnit.Pixel);
}

thumbnail.Dispose();

return final_image;
}
}
catch (Exception e)
{
return new Bitmap(newWidth, newHeight);
}
}
}


2、图片上传处理程序Upload.ashx

复制代码 代码如下:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Drawing;

namespace Mood
{
/// <summary>
/// Upload 的摘要说明
/// </summary>
public class Upload : IHttpHandler
{
Image thumbnail;

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
try
{
string id = System.Guid.NewGuid().ToString();
HttpPostedFile jpeg_image_upload = context.Request.Files["Filedata"];
Image original_image = System.Drawing.Image.FromStream(jpeg_image_upload.InputStream);
original_image.Save(System.Web.HttpContext.Current.Server.MapPath("~/Files/" + id + ".jpg"));
int target_width = 200;
int target_height = 150;
string path = "Files/Files200/" + id + ".jpg";
string saveThumbnailPath = System.Web.HttpContext.Current.Server.MapPath("~/" + path);
thumbnail = Thumbnial.GetThumbnail(original_image, target_width, target_height, true);
thumbnail.Save(saveThumbnailPath);
context.Response.Write(path);
}
catch (Exception e)
{
// If any kind of error occurs return a 500 Internal Server error
context.Response.StatusCode = 500;
context.Response.Write("上传过程中出现错误!");
}
finally
{
if (thumbnail != null)
{
thumbnail.Dispose();
}
}
}

public bool IsReusable
{
get
{
return false;
}
}
}
}


3、前台界面Mood.aspx

复制代码 代码如下:

网友评论
<