[.net] Swfupload配置示例 sufupload for .net

      批量上传在web应用中非常常见，而基于<input type="file">控件的原理，没有办法通过在js中新增file控件来达到多附件上传的目的，这时候，我们需要一个易用的批量上传文件的控件。

      swfupload是一个客户端文件上传控件，最初由Vinterwebb.se开发，基于flash和js技术，提供一个富功能的上传控件，它包含以下特点：

      1. 可选择多个文件上传

      2. 类似ajax局部刷新效果

      3. 可显示上传进度

      4. 选择文件时，可以过滤文件类型（据我所知，使用file控件很难做到这点）

      5. 良好的浏览器兼容性，兼容一些js库，如：jquery, prototype，支持flash 8,9

      6. 上传图片时，可先预览效果

      使用起来也比较方便，以下将描述它的配置过程，并在文章最后提供源码的下载链接。

      【资源下载】

      你可以在swfupload官网上找到最新的版本，注意下载.net的版本。

      【配置步骤】

      1. 引用必要的文件，以下三个文件是必须的：

      swfupload.swf、swfupload.js、handlers.js

      包含进系统，注意路径（批量上传页面与三个文件的相对路径），例如上传文件页面在网站根目录，而三个文件放置在Content/js下，那么，引入路径应该是：

     

<script type="text/javascript" src="Content/js/swfupload.js"></script>
<script type="text/javascript" src="Content/js/handlers.js"></script>

      swf文件路径会在配置中使用到，swfupload上传页面配置如下：

     

<script type="text/javascript">
        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                // Backend Settings
                upload_url: "upload.aspx",
                post_params: {
                    "ASPSESSID": "<%=Session.SessionID %>"
                },

                // File Upload Settings
                file_size_limit: "2 MB",
                file_types: "*.jpeg; *.jpg; *.png; *.gif",
                file_types_description: "Images",
                file_upload_limit: "0",    // Zero means unlimited

                // 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 settings
                button_image_url: "Content/images/XPButtonNoText_160x22.png",
                button_placeholder_id: "spanButtonPlaceholder",
                button_width: 160,
                button_height: 22,
                button_text: '<span class="button">选择图片<span class="buttonSmall">[大小(2MB Max)]</span></span>',
                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,

                // Flash Settings
                flash_url: "Content/js/swfupload.swf", // Relative to this file

                custom_settings: {
                    upload_target: "divFileProgressContainer"
                },

                // Debug Settings
                debug: false
            });
        }
    </script>

      upload_url即生成缩略图和图片缓存的处理页面。

      post_params这个属性不能随意修改，否则，图片将无法缓存至session中，导致生成缩略图后，没有办法真正上传图片。

      怎么配置这些属性？顾名思义，基本上可以猜测出它的用途，在此不过多累述。在handlers.js中包含以上方法的响应，如果你有特殊需求，可以考虑改造这些方法。

      官网的批量上传图片的demo只是在页面生成缩略图，并把图片信息缓存在session中，并没有实际上传的操作，我在网上找到一个改造的例子，添加了上传图片和清理缓存的功能，注：它所谓的上传图片其实是上传的缩略图的图片，不会上传原型图片，应该算是功能上的bug，我在上面做了一个小小的修改，即生成了缩略图，又可以上传原型图片，修改代码如下：

protected void Page_Load(object sender, EventArgs e)
    {
		
		System.Drawing.Image thumbnail_image = null;
		System.Drawing.Image original_image = null;
		System.Drawing.Bitmap final_image = null;
        System.Drawing.Bitmap real_image = null;
		System.Drawing.Graphics graphic = null;
        System.Drawing.Graphics real_graphic = null;
		MemoryStream ms = null;

		try
		{
			// Get the data
			HttpPostedFile jpeg_image_upload = Request.Files["Filedata"];

			// Retrieve the uploaded image
			original_image = System.Drawing.Image.FromStream(jpeg_image_upload.InputStream);

			// Calculate the new width and height
			int width = original_image.Width;
			int height = original_image.Height;
			int target_width = 100;
			int target_height = 100;
			int new_width, new_height;

			float target_ratio = (float)target_width / (float)target_height;
			float image_ratio = (float)width / (float)height;

			if (target_ratio > image_ratio)
			{
				new_height = target_height;
				new_width = (int)Math.Floor(image_ratio * (float)target_height);
			}
			else
			{
				new_height = (int)Math.Floor((float)target_width / image_ratio);
				new_width = target_width;
			}

			new_width = new_width > target_width ? target_width : new_width;
			new_height = new_height > target_height ? target_height : new_height;
			
			
			// Create the thumbnail
			
			// Old way
			//thumbnail_image = original_image.GetThumbnailImage(new_width, new_height, null, System.IntPtr.Zero);
				// We don't have to create a Thumbnail since the DrawImage method will resize, but the GetThumbnailImage looks better
				// I've read about a problem with GetThumbnailImage. If a jpeg has an embedded thumbnail it will use and resize it which
				//  can result in a tiny 40x40 thumbnail being stretch up to our target size

            real_image = new System.Drawing.Bitmap(width, height);  // ÕæʵͼƬ´óС
            real_graphic = System.Drawing.Graphics.FromImage(real_image);
            real_graphic.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; 
			real_graphic.DrawImage(original_image, 0, 0, width, height);
			
			final_image = new System.Drawing.Bitmap(target_width, target_height);

			graphic = System.Drawing.Graphics.FromImage(final_image);
			graphic.FillRectangle(new System.Drawing.SolidBrush(System.Drawing.Color.Black), new System.Drawing.Rectangle(0, 0, target_width, target_height));
			int paste_x = (target_width - new_width) / 2;
			int paste_y = (target_height - new_height) / 2;
			graphic.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; /* new way */
			//graphic.DrawImage(thumbnail_image, paste_x, paste_y, new_width, new_height);
			graphic.DrawImage(original_image, paste_x, paste_y, new_width, new_height);
			
			// Store the thumbnail in the session (Note: this is bad, it will take a lot of memory, but this is just a demo)
			ms = new MemoryStream();
            final_image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);

            MemoryStream real_ms = new MemoryStream();
            real_image.Save(real_ms, System.Drawing.Imaging.ImageFormat.Jpeg);

			// Store the data in my custom Thumbnail object
            string thumbnail_id = DateTime.Now.ToString("yyyyMMddHHmmssfff")
                    + jpeg_image_upload.FileName.Substring(jpeg_image_upload.FileName.LastIndexOf("."));
            Thumbnail thumb = new Thumbnail(thumbnail_id, ms.GetBuffer());
            Thumbnail real_thumb = new Thumbnail(thumbnail_id, real_ms.GetBuffer());
            List<Thumbnail> real_thumbnails = Session["real_file_info"] as List<Thumbnail>;
            if (real_thumbnails == null) {
                real_thumbnails = new List<Thumbnail>();
            }
            real_thumbnails.Add(real_thumb);
            Session["real_file_info"] = real_thumbnails;

			// Put it all in the Session (initialize the session if necessary)			
			List<Thumbnail> thumbnails = Session["file_info"] as List<Thumbnail>;
			if (thumbnails == null)
			{
				thumbnails = new List<Thumbnail>();
				Session["file_info"] = thumbnails;
			}
			thumbnails.Add(thumb);

			Response.StatusCode = 200;
			Response.Write(thumbnail_id);
		}
		catch(Exception ex)
		{
			// If any kind of error occurs return a 500 Internal Server error
			Response.StatusCode = 500;
			Response.Write("An error occured£º" + ex.Message);
			Response.End();
		}
		finally
		{
			// Clean up
			if (final_image != null) final_image.Dispose();
			if (graphic != null) graphic.Dispose();
			if (original_image != null) original_image.Dispose();
			if (thumbnail_image!= null )thumbnail_image.Dispose();
			if (ms != null) ms.Close();
			Response.End();
		}
	

       上传图片的操作如下：

       

HttpPostedFile jpeg_image_upload = Request.Files["Filedata"];
        if (Session["real_file_info"] != null)
        {
            try
            {
                List<Thumbnail> thumbnails = Session["real_file_info"] as List<Thumbnail>;

                string UploadPath = Server.MapPath("~/Upload/");

                // 可缓存Thumbnail数据类，在上传后，统一保存图片完整路径至数据库
                foreach (Thumbnail img in thumbnails)
                {
                    FileStream fs = new FileStream(UploadPath + img.ID, FileMode.Create);
                    BinaryWriter bw = new BinaryWriter(fs);
                    bw.Write(img.Data);
                    bw.Close();
                    fs.Close();
                }

                // 操作数据库

                Session.Clear();
                Response.Write("<script>alert('上传图片成功！');</script>");
            }
            catch (Exception ex)
            {
                Response.Write("<script>alert('上传图片失败：" + ex.Message + "');</script>");
            }
        }

       由于后面会提供源码下载地址，这里只列出关键部分的代码，不列完整代码了。

       运行效果图：

       

 

       swfupload-sample源码下载。