·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> 使用SWFUpload无刷新上传图片

【如有意向点此提交需求】关于我们

使用SWFUpload无刷新上传图片

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

使用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     /// 图片id16     /// </summary>17     public string ID18     {19         get20         {21             return this.id;22         }23         set24         {25             this.id = value;26         }27     }28 29     private byte[] thumbnail_data;30 31     /// <summary>32     /// 图片的二进制数据33     /// </summary>34     public byte[] Data35     {36         get37         {38             return this.thumbnail_data;39         }40         set41         {42             this.thumbnail_data = value;43         }44     }45 46     private string contentType;47 48     /// <summary>49     /// 图片对应的MIME类型50     /// </summary>51     public string ContentType52     {53         get54         {55             return contentType;56         }57 58         set59         {60             contentType = value;61         }62     }63 }
    Thumbnail
    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Upload Images</title>    <script src="swfupload/swfupload.js"></script>    <script src="swfupload/handlers.js"></script>    <script>        //注：div的id名称最好不要改，要改的话在handlers.js文件中也要进行修改，div的名称已经在handlers.js文件中写死        var swfu;        window.onload = function () {            swfu = new SWFUpload({                // 后台设置，设置处理上传的页面                upload_url: "/Handlers/ImageUploadHandler.ashx",                // 文件上传大小限制设置                file_size_limit: "3 MB",                //文件类型设置，多种格式以英文中的分号分开                file_types: "*.jpg;*.png",                //文件描述，与弹出的选择文件对话框相关                file_types_description : "Images file",                //设置上传文件数量限制                file_upload_limit: "1",                //事件处理程序，最好不要改，事件处理程序已在handlers.js文件中定义                // Event Handler Settings - these functions as defined in Handlers.js                //  The handlers are not part of SWFUpload but are part of my website and control how                //  my website reacts to the SWFUpload events.                file_queue_error_handler : fileQueueError,                file_dialog_complete_handler : fileDialogComplete,                upload_progress_handler : uploadProgress,                upload_error_handler : uploadError,                upload_success_handler : uploadSuccess,                upload_complete_handler : uploadComplete,                // 上传按钮设置                button_image_url : "/swfupload/images/XPButtonNoText_160x22.png",                button_placeholder_id: "spanButtonPlaceholder",                button_width: 160,                button_height: 22,                button_text : '请选择图片 (最大3M)',                button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',                button_text_top_padding: 1,                button_text_left_padding: 5,                // swfupload.swf Flash设置                flash_url : "/swfupload/swfupload.swf",                    //自定义的其他设置                custom_settings : {                    upload_target: "divFileProgressContainer"                },                // 是否开启调试模式，调试时可以设置为true，发布时设置为false                debug: false            });        }    </script></head><body>    <form id="form1">        <div id="content">                <h2>Upload Images Demo</h2>                <div id="swfu_container" style="margin: 0px 10px;">            <div>                <span id="spanButtonPlaceholder"></span>            </div>            <div id="divFileProgressContainer" style="height: 75px;"></div>            <div id="thumbnails"></div>        </div>        </div>    </form></body></html>
    Html Demo
      1     /// <summary>  2     /// 图片上传处理  3     /// </summary>  4     public class ImageUploadHandler : IHttpHandler, IRequiressessionState  5     {  6         /// <summary>  7         /// 记录日志 logger  8         /// </summary>  9         private static Common.LogHelper logger = new Common.LogHelper(typeof(ImageUploadHandler)); 10         public void ProcessRequest(HttpContext context) 11         { 12             context.Response.ContentType = "text/plain"; 13             System.Drawing.Image thumbnail_image = null; 14             System.Drawing.Image original_image = null; 15             System.Drawing.Bitmap final_image = null; 16             System.Drawing.Graphics graphic = null; 17             MemoryStream ms = null; 18             try 19             { 20                 //验证用户是否登录，是否有权限上传 21                 if (context.Session["User"]==null) 22