使用SWFUpload无刷新上传图片

使用SWFUpload组件无刷新上传图片

在做项目时，需要用到一个图片的无刷新上传，之前听说过SWFUpload，于是想要通过SWFUpload来进行图片的无刷新上传，由于我的项目属于是ASP.NET项目，所以本文着重讲解ASP.NET 的使用，个人感觉示例基本给的很清晰，参考文档进行开发，并非难事

0.     首先下载swfUpload 包，在下载的包中有samples文件夹，samples下有demos文件夹，打开demos文件夹可看到如下图所示结构

我们待会会用到的包括，swfupload目录下的文件，css不建议使用以避免与自己写的CSS相冲突使得页面布局完全乱掉，如果要添加样式最好自己写

 

打开 applicationdemo.net目录会看到这样的结构

打开index.html可以看到这样的页面

 

点击NET2.0下的Application Demo C#项

 

1. 添加资源引用

将要引用的资源包含到项目中（包括swfupload文件夹下的文件与，demo下的资源文件，handlers.js是在demo中js目录下的js文件）

1. 首先熟悉demo，将demo中的页面包含到项目中

   在Defaut.aspx页面中使用swfUpload组件进行图片的无刷新上传直接运行，看效果，大概了解基本过程

2. 修改handlers.js文件

   我的项目文件结构大概是这样的

   

   我的处理文件上传的页面是ImageUploadHandler.ashx，获取缩略图的页面是GetThumbHandler.ashx,Thumbnail.cs是demo中App_Code文件夹中的文件,个人觉得像这种只处理逻辑功能而不展现页面的最好都用一般处理程序来实现。由于哪个文件处理上传哪个文件生成缩略图已经在handlers.js文件中写死了，所以必须要修改handlers.js文件以能够使页面正常运行

3. 最终修改版汇总

   

    

   

   

    1 /// <summary>
    2 /// 缩略图
    3 /// </summary>
    4 public class Thumbnail
    5 {
    6     public Thumbnail(string id, byte[] data)
    7     {
    8         this.ID = id;
    9         this.Data = data;
   10     }
   11 
   12     private string id;
   13 
   14     /// <summary>
   15     /// 图片id
   16     /// </summary>
   17     public string ID
   18     {
   19         get
   20         {
   21             return this.id;
   22         }
   23         set
   24         {
   25             this.id = value;
   26         }
   27     }
   28 
   29     private byte[] thumbnail_data;
   30 
   31     /// <summary>
   32     /// 图片的二进制数据
   33     /// </summary>
   34     public byte[] Data
   35     {
   36         get
   37         {
   38             return this.thumbnail_data;
   39         }
   40         set
   41         {
   42             this.thumbnail_data = value;
   43         }
   44     }
   45 
   46     private string contentType;
   47 
   48     /// <summary>
   49     /// 图片对应的MIME类型
   50     /// </summary>
   51     public string ContentType
   52     {
   53         get
   54         {
   55             return contentType;
   56         }
   57 
   58         set
   59         {
   60             contentType = value;
   61         }
   62     }
   63 }

   Thumbnail