jQuery上传插件Uploadify 3.2在.NET下的详细例子

项目中要使用Uploadify 3.2来实现图片上传并生成缩略通的功能,特此记下来,以供各位参考!

Uploadify下载地址:

下载下来解压后估计里面很多文件,其实有用的也就jquery.uploadify.min.js、uploadify.css、uploadify.swf和uploadify-cancel.png这四个文件。你还得下载jQuery库,我这里用的是jquery-1.7.2.min.js,另外和大多数JQ插件一样,同时也需要swfobject.js这个插件,我的是2.2的版本,东西都准备好了,那下面就开始。

前端界面:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jqUploadify._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head runat="server"><title>无标题页</title><link href="scripts/uploadify.css" rel="stylesheet" type="text/css" /><link href="scripts/default.css" rel="stylesheet" type="text/css" /><script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script><script src="scripts/swfobject.js" type="text/javascript"></script><script src="scripts/jquery.uploadify.min.js" type="text/javascript"></script><script type="text/javascript">$(function(){$("#file_upload").uploadify({//开启调试’debug’ : false,//是否自动上传’auto’:false,’buttonText’:’选择照片’,//flash’swf’: "scripts/uploadify.swf",//文件选择后的容器ID’queueID’:’uploadfileQueue’,’uploader’:’scripts/upload.ashx’,’width’:’75’,’height’:’24’,’multi’:false,’fileTypeDesc’:’支持的格式:’,’fileTypeExts’:’*.jpg;*.jpge;*.gif;*.png’,’fileSizeLimit’:’1MB’,’removeTimeout’:1,//返回一个错误,选择文件的时候触发’onSelectError’:function(file, errorCode, errorMsg){switch(errorCode) {case -100:alert("上传的文件数量已经超出系统限制的"+$(‘#file_upload’).uploadify(‘settings’,’queueSizeLimit’)+"个文件!");break;case -110:alert("文件 ["+file.name+"] 大小超出系统限制的"+$(‘#file_upload’).uploadify(‘settings’,’fileSizeLimit’)+"大小!");break;case -120:alert("文件 ["+file.name+"] 大小异常!");break;case -130:alert("文件 ["+file.name+"] 类型不正确!");break;}},//检测FLASH失败调用’onFallback’:function(){alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");},//上传到服务器,服务器返回相应信息到data里’onUploadSuccess’:function(file, data, response){//alert(data);}});});function doUplaod(){$(‘#file_upload’).uploadify(‘upload’,’*’);}function closeLoad(){$(‘#file_upload’).uploadify(‘cancel’,’*’);}</script></head><body><table width="704" border="0" align="center" cellpadding="0" cellspacing="0" id="__01"><tr><td align="center" valign="middle"><div id="uploadfileQueue" style="padding: 3px;"></div><div id="file_upload"></div></td></tr><tr><td height="50" align="center" valign="middle"><img alt="" src="images/BeginUpload.gif" width="77" height="23" onclick="doUplaod()" style="cursor: hand" /><img alt="" src="images/CancelUpload.gif" width="77" height="23" onclick="closeLoad()" style="cursor: hand" /></td></tr></table></body></html>

后端的Handler:

using System;using System.Collections;using System.Data;using System.Linq;using System.Web;using System.Web.Services;using System.Web.Services.Protocols;using System.Xml.Linq;using System.Web.SessionState;using System.IO;namespace jqUploadify.scripts{/// <summary>/// $codebehindclassname$ 的摘要说明/// </summary>[WebService(Namespace = "")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]public class upload : IHttpHandler, IRequiresSessionState{public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";context.Response.Charset = "utf-8";HttpPostedFile file = context.Request.Files["Filedata"];string uploadPath = context.Server.MapPath("..\\uploads\\");if (file != null){if (!Directory.Exists(uploadPath)){Directory.CreateDirectory(uploadPath);}file.SaveAs(uploadPath + file.FileName);//生成缩略图MakeThumbnail(uploadPath + file.FileName, uploadPath + "\\s\\" + file.FileName, 80, 80);}}private void MakeThumbnail(string sourcePath, string newPath, int width, int height){System.Drawing.Image ig = System.Drawing.Image.FromFile(sourcePath);int towidth = width;int toheight = height;int x = 0;int y = 0;int ow = ig.Width;int oh = ig.Height;if ((double)ig.Width / (double)ig.Height > (double)towidth / (double)toheight){oh = ig.Height;ow = ig.Height * towidth / toheight;y = 0;x = (ig.Width – ow) / 2;}else{ow = ig.Width;oh = ig.Width * height / towidth;x = 0;y = (ig.Height – oh) / 2;}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(ig, new System.Drawing.Rectangle(0, 0, towidth, toheight), new System.Drawing.Rectangle(x, y, ow, oh), System.Drawing.GraphicsUnit.Pixel);try{bitmap.Save(newPath, System.Drawing.Imaging.ImageFormat.Jpeg);}catch (Exception ex){throw ex;}finally{ig.Dispose();bitmap.Dispose();g.Dispose();}}public bool IsReusable{get{return false;}}}}这样我们就是实现图片上传至uploads,生成的缩略图(这里设为80*80)存放在uploads下面的s文件夹中,是不是很简单呢!当然实际使用过程你还可能碰到一下的问题:

1、在火狐下session出现丢失的情况,可以参考这里:

2、IE9出现了按钮不能点击的问题,可以参考这里:

最后贴一个Uploadify参数说明:

我们一路上兴致勃勃地参观,当夕阳西下时,才恋恋不舍地离开。

jQuery上传插件Uploadify 3.2在.NET下的详细例子

相关文章:

你感兴趣的文章:

标签云: