ASP.NET下的JQ上传

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

Uploadify下载地址：http://www.uploadify.com/download/

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

前端界面：

[html] view plaincopy

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jqUploadify._Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title>无标题页</title>
  6. <link href="scripts/uploadify.css" rel="stylesheet" type="text/css" />
  7. <link href="scripts/default.css" rel="stylesheet" type="text/css" />
  8. <script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
  9. <script src="scripts/swfobject.js" type="text/javascript"></script>
  10. <script src="scripts/jquery.uploadify.min.js" type="text/javascript"></script>
  11. <script type="text/javascript">
  12. $(function(){
  13. $("#file_upload").uploadify({
  14. //开启调试
  15. ‘debug‘ : false,
  16. //是否自动上传
  17. ‘auto‘:false,
  18. ‘buttonText‘:‘选择照片‘,
  19. //flash
  20. ‘swf‘: "scripts/uploadify.swf",
  21. //文件选择后的容器ID
  22. ‘queueID‘:‘uploadfileQueue‘,
  23. ‘uploader‘:‘scripts/upload.ashx‘,
  24. ‘width‘:‘75‘,
  25. ‘height‘:‘24‘,
  26. ‘multi‘:false,
  27. ‘fileTypeDesc‘:‘支持的格式：‘,
  28. ‘fileTypeExts‘:‘*.jpg;*.jpge;*.gif;*.png‘,
  29. ‘fileSizeLimit‘:‘1MB‘,
  30. ‘removeTimeout‘:1,
  31. //返回一个错误，选择文件的时候触发
  32. ‘onSelectError‘:function(file, errorCode, errorMsg){
  33. switch(errorCode) {
  34. case -100:
  35. alert("上传的文件数量已经超出系统限制的"+$(‘#file_upload‘).uploadify(‘settings‘,‘queueSizeLimit‘)+"个文件！");
  36. break;
  37. case -110:
  38. alert("文件 ["+file.name+"] 大小超出系统限制的"+$(‘#file_upload‘).uploadify(‘settings‘,‘fileSizeLimit‘)+"大小！");
  39. break;
  40. case -120:
  41. alert("文件 ["+file.name+"] 大小异常！");
  42. break;
  43. case -130:
  44. alert("文件 ["+file.name+"] 类型不正确！");
  45. break;
  46. }
  47. },
  48. //检测FLASH失败调用
  49. ‘onFallback‘:function(){
  50. alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
  51. },
  52. //上传到服务器，服务器返回相应信息到data里
  53. ‘onUploadSuccess‘:function(file, data, response){
  54. //alert(data);
  55. }
  56. });
  57. });
  58. function doUplaod(){
  59. $(‘#file_upload‘).uploadify(‘upload‘,‘*‘);
  60. }
  61. function closeLoad(){
  62. $(‘#file_upload‘).uploadify(‘cancel‘,‘*‘);
  63. }
  64. </script>
  65. </head>
  66. <body>
  67. <table width="704" border="0" align="center" cellpadding="0" cellspacing="0" id="__01">
  68. <tr>
  69. <td align="center" valign="middle">
  70. <div id="uploadfileQueue" style="padding: 3px;">
  71. </div>
  72. <div id="file_upload">
  73. </div>
  74. </td>
  75. </tr>
  76. <tr>
  77. <td height="50" align="center" valign="middle">
  78. <img alt="" src="images/BeginUpload.gif" width="77" height="23" onclick="doUplaod()" style="cursor: hand" />
  79. <img alt="" src="images/CancelUpload.gif" width="77" height="23" onclick="closeLoad()" style="cursor: hand" />
  80. </td>
  81. </tr>
  82. </table>
  83. </body>
  84. </html>

后端的Handler：

[csharp] view plaincopy

  1. using System;
  2. using System.Collections;
  3. using System.Data;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.Services;
  7. using System.Web.Services.Protocols;
  8. using System.Xml.Linq;
  9. using System.Web.SessionState;
  10. using System.IO;
  11. namespace jqUploadify.scripts
  12. {
  13. /// <summary>
  14. /// $codebehindclassname$ 的摘要说明
  15. /// </summary>
  16. [WebService(Namespace = "http://tempuri.org/")]
  17. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  18. public class upload : IHttpHandler, IRequiresSessionState
  19. {
  20. public void ProcessRequest(HttpContext context)
  21. {
  22. context.Response.ContentType = "text/plain";
  23. context.Response.Charset = "utf-8";
  24. HttpPostedFile file = context.Request.Files["Filedata"];
  25. string uploadPath = context.Server.MapPath("..\\uploads\\");
  26. if (file != null)
  27. {
  28. if (!Directory.Exists(uploadPath))
  29. {
  30. Directory.CreateDirectory(uploadPath);
  31. }
  32. file.SaveAs(uploadPath + file.FileName);
  33. //生成缩略图
  34. MakeThumbnail(uploadPath + file.FileName, uploadPath + "\\s\\" + file.FileName, 80, 80);
  35. }
  36. }
  37. private void MakeThumbnail(string sourcePath, string newPath, int width, int height)
  38. {
  39. System.Drawing.Image ig = System.Drawing.Image.FromFile(sourcePath);
  40. int towidth = width;
  41. int toheight = height;
  42. int x = 0;
  43. int y = 0;
  44. int ow = ig.Width;
  45. int oh = ig.Height;
  46. if ((double)ig.Width / (double)ig.Height > (double)towidth / (double)toheight)
  47. {
  48. oh = ig.Height;
  49. ow = ig.Height * towidth / toheight;
  50. y = 0;
  51. x = (ig.Width - ow) / 2;
  52. }
  53. else
  54. {
  55. ow = ig.Width;
  56. oh = ig.Width * height / towidth;
  57. x = 0;
  58. y = (ig.Height - oh) / 2;
  59. }
  60. System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);
  61. System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);
  62. g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
  63. g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
  64. g.Clear(System.Drawing.Color.Transparent);
  65. g.DrawImage(ig, new System.Drawing.Rectangle(0, 0, towidth, toheight), new System.Drawing.Rectangle(x, y, ow, oh), System.Drawing.GraphicsUnit.Pixel);
  66. try
  67. {
  68. bitmap.Save(newPath, System.Drawing.Imaging.ImageFormat.Jpeg);
  69. }
  70. catch (Exception ex)
  71. {
  72. throw ex;
  73. }
  74. finally
  75. {
  76. ig.Dispose();
  77. bitmap.Dispose();
  78. g.Dispose();
  79. }
  80. }
  81. public bool IsReusable
  82. {
  83. get
  84. {
  85. return false;
  86. }
  87. }
  88. }
  89. }

这样我们就是实现图片上传至uploads，生成的缩略图（这里设为80*80）存放在uploads下面的s文件夹中，是不是很简单呢！当然实际使用过程你还可能碰到一下的问题：

1、在火狐下session出现丢失的情况，可以参考这里：http://www.cnblogs.com/akingyao/archive/2012/09/04/2670794.html

2、IE9出现了按钮不能点击的问题，可以参考这里：http://www.uploadify.com/forum/#/discussion/9155/uploadify-version-3-2-does-not-work-in-ie9/p1

最后贴一个Uploadify参数说明：

Uploadify Version 3.2

Options选项设置

auto    选择文件后自动上传
buttonClass    给“浏览按钮”加css的class样式
buttonCursor    鼠标移上去形状：arrow箭头、hand手型（默认）
buttonImage    鼠标移上去变换图片
buttonText    按钮文字
checkExisting    在目录中检查文件是否已上传成功（1 ture,0 false）
debug        是否显示调试框（默认不显示false）
fileObjName    设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata，$tempFile = $_FILES[‘Filedata‘][‘tmp_name‘]
fileSizeLimit    设置允许上传文件最大值B, KB, MB, GB 比如：‘fileSizeLimit‘ : ‘20MB‘
fileTypeDesc    选择的文件的描述。这个字符串出现在浏览文件对话框中文件类型下拉框处。默认：All Files
fileTypeExts    允许上传的文件类型。格式：‘fileTypeExts‘ : ‘*.gif; *.jpg; *.png‘
formData    附带值，需要通过get or post传递的额外数据，需要结合onUploadStart事件一起使用
height        “浏览按钮”高度px
itemTemplate    <itemTemplate>节点表示显示的内容。这些内容中也可以包含绑定到控件DataSource属性中元素集合的数据。
method        上传方式。默认：post
multi        选择文件时是否可以【选择多个】。默认：可以true
overrideEvents    不执行默认的onSelect事件
preventCaching    随机缓存值 默认true ，可选true和false.如果选true,那么在上传时会加入一个随机数来使每次的URL都不同,以防止缓存.但是可能与正常URL产生冲突
progressData    进度条上显示的进度:有百分比percentage和速度speed。默认百分比
queueID        给“进度条”加背景css的ID样式。文件选择后的容器ID
queueSizeLimit    允许多文件上传的数量。默认：999
removeCompleted    上传完成后队列是否自动消失。默认：true
removeTimeout    上传完成后队列多长时间后消失。默认 3秒    需要：‘removeCompleted‘ : true,时使用
requeueErrors    队列上传出错，是否继续回滚队列，即反复尝试上传。默认：false
successTimeout    上传超时时间。文件上传完成后,等待服务器返回信息的时间(秒).超过时间没有返回的话,插件认为返回了成功。 默认：30秒
swf        swf文件的路径,本文件是插件自带的,不可用其它的代替.本参数不可省略
uploader    上传处理程序URL，本参数不可省略
uploadLimit    限制总上传文件数,默认是999。指同一时间，如果关闭浏览器后重新打开又可上传。
width        “浏览按钮”宽度px

Events 事件
onCancel    当取消一个上传队列中的文件时触发,删除时触发 
onClearQueue    清除队列。当‘cancel‘方法带着*参数时,也就是说一次全部取消的时候触发.queueItemCount是被取消的文件个数（另外的按钮）
onDestroy    取消所有的上传队列（另外的按钮）
onDialogClose    当选择文件对话框关闭时触发,不论是点的‘确定‘还是‘取消‘都会触发.如果本事件被添加进了‘overrideEvents‘参数中,那么如果在选择文件时产生了错误,不会有错误提示框弹出
onDialogOpen    当选择文件框被打开时触发,没有传过来的参数
onDisable    关闭上传
onEnable    开启上传
onFallback    检测FLASH失败调用
onInit        每次初始化一个队列时触发
onQueueComplete    当队列中的所有文件上传完成时触发
onSelect    当文件从浏览框被添加到队列中时触发
onSelectError    选择文件出错时触发
onSWFReady    flash准备好时触发
onUploadComplete当一个文件上传完成时触发
onUploadError    当文件上传完成但是返回错误时触发
onUploadProgress上传汇总
onUploadStart    一个文件上传之间触发
onUploadSuccess    每个上传完成并成功的文件都会触发本事件

Methods 方法
cancel        取消一个上传队列
destroy        取消所有上传队列
disable        禁止点击“浏览按钮”
settings    返回或修改一个 uploadify实例的settings值
stop        停止当前的上传并重新添加到队列中去
upload        上传指定的文件或者所有队列中的文件

最后是DEMO的下载地址：http://download.csdn.net/detail/wangqiuyun/5665517

时间： 2024-10-25 19:32:39

ASP.NET下的JQ上传的相关文章

ASP.NET MVC下使用文件上传

这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解压,将组件包拷贝到MVC项目中 3.  根目录下添加新文件夹Uploads,然后新建控制器UploadifyController.cs using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Web; using S

ASP.NET实现文件的上传和下载

最近做的一个高校网站中涉及到了上传和下载文件的需求(具体需求为:网站公布的通知,在后台要能给每个通知添加附件,在前台要能显示并下载附件),之前只是学习过关于上传的理论,这里探索了一下下,与大家分享一下成果. 事先说明:这个例子采用的是简单的三层结构,层与层之间是用实体来传值.而且这种方法不但在本地测试时可以成功,并且可以部署在服务器上,供异地上传和下载文件. 专门做了一个数据库表用来存储附件的相关信息: 字段 说明 AnnexID 附件ID AnnexName 附件名称 AnnexAddress

asp.net 中 UEditor 图片上传失败的处理方法

1.0 找到 net 文件夹下面的 web.config 配置文件,注释掉如下的两句: 2.0 Uploader文件默认属性为编译,将其属性改为内容以后重新运行程序,图片上传成功. 3.0 删除 imageUp.ashx 中的 <%@ Assembly Src="Uploader.cs" %> asp.net 中 UEditor 图片上传失败的处理方法

springmvc和servlet下的文件上传和下载（存文件目录和存数据库Blob两种方式）

项目中涉及了文件的上传和下载,以前在struts2下做过,今天又用springmvc做了一遍,发现springmvc封装的特别好,基本不用几行代码就完成了,下面把代码贴出来: FileUpAndDown.jsp <%@ page language="java" contentType="text/html; charset=UTF-8"%> <html> <head> <title>using commons Uplo

ftp在命令行状态下下载跟上传东西

假设FTP服务器的地址是192.168.1.100 1 进入dos的FTP界面,有两种方式,一种是:开始--运行--FTP--在cmd界面下输入命令open 192.168.1.100 另一种是 开始--运行--cmd--输入ftp 192.168.1.100 如果ftp的端口号不是默认的21号端口,那么还要在后面空格加端口号,如端口号是10000 例如 ftp 192.168.1.100 10000 2它会提示输入用户名username 它会提示你输入密码:password 注意:密码不显示出

centos 6.5下安装文件上传下载服务

centos 6.5下安装文件上传下载服务 由于每次在CentOS中要下载一些配置文件到物理机,和上传一些文件到服务器,导致来回的开启ftp软件有点麻烦,这里我们可以使用文件上传下载服务,来解决上传和下载的问题. 1.登录服务器 2.执行命令:yum -y install lrzsz 3.执行rz命令进行文件上传.(注意,如果文件为二进制文件则需要执行:rz -be) 4. 执行[sz 文件名]命令进行文件下载.

Ubuntu下Filezilla 无法上传某些文件或者已经上传的文件名显示为乱码

Ubuntu下使用Filezilla与Windows文件服务器传输文件出现无法上传某些文件或者已经上传的文件名显示为乱码的情况,还有以前遇到过 用filezilla从自设的windows远程机上上传下载文件,可是在远程机上明明存在的一些文件却无法显示,通过网上搜索才知道更准确的说法是"FileZilla无法显示中文文件名",当文件多时也许会出现这样的规律. 解决方案是设置字符,将默认的自动检测更改为使用自定义的字符集gb2312: FileZilla无法显示中文文件名该如何设置(图)

asp.net mvc3用file上传文件大小限制问题

在Windows2008下,如果上传比较大的文件,可能会出现404错误,(请求筛选模块被配置为拒绝超过请求内容长度的请求). 可通过如下方法解决: 打开URTracker根目录下的web.config文件,找到<system.webServer>一节,加入如下配置即可: <security><requestFiltering ><requestLimits maxAllowedContentLength="1024000000" ><

ASP.NET(C#)FileUpload实现上传限定类型和大小的文件到服务器&lt;from Copying&gt;

2009-02-15 11:52:54|  分类: 默认分类 |  标签: |举报 |字号大中小 订阅 ASP.NET(C#)FileUpload实现上传限定类型和大小的文件到服务器 2009-01-07 23:29 上传文件有两个主要的目的地,一个是服务器,另一个是数据库,ASP.NET内置了FileUpload这个上传控件,文本框显示用户选择的文件的全名. 其属性主要包括: ContenLength:上传文件大小,单位:字节 FileName:文件名称 HasFile:是否选择了文件 例子: