SWFUpload 使用及注意事项

转载 2012年03月22日 11:33:25
关于SWFUpload的一些说明:

      1)  SWFUpload使用一个隐藏的Flash影片来控制文件的选择和上传。

      2) JavaScript用来激活文件选择对话框。此文件选择对话框是可以设置允许用户选择一个单独的文件或者是多个文件。 选择的的文件类型也是可以被限制的,因此用户只能选择指定的适当的文件,例如*.jgp;*.gif。

      3)  当选定文件以后,每个文件都会被验证和处理。当Flash上传文件的时候,由开发人员预定义的Javascript事件会被定时触发以便来更新页面中的UI,同时还提供上传状态和错误信息。

      4)  选定的文件的上传和它所在页面、表单是独立的。每个文件都是单独上传的,这就保证了服务端脚本能够在一个时间点更容易地处理单个文件。虽然Flash提供了上传服务,但是页面并不会提交或者重新载入。相比于标准的HTML Form,SWFUpload的使用方式更像是AJAX程序,页面中的Form会和FLASH控制的文件上传单独处理。
具体信息可以访问swfupload官方网站:http://www.swfupload.org/

让我们先来看看客户端的界面效果图。(多选文件,批量上传,上传进度显示)

1) 进行多文件选择:

 

                                           图1

2) 上传进度显示

 

                                      图2

下面进行具体的操作:

第一步,要进行下面的过程,必须先准备好Flash插件和SwfUpload组件。
1) Flash插件:相信大家的浏览器早已经安装过了,请检查版本,尽量使用最新的的flash插件。

2) SwfUpload:大家可以访问swfupload官方网站:http://www.swfupload.org/,在这个网站上可以下载到组件与demo。

第二步,创建应用的目录结构,我这个示例的目录结构如图:
1.主要目录结构


2. 文件上传用到的js脚本文件。

 

 

3. swfupload目录中的文件

 

 

第三步,前台部分准备客户操作的WEB界面,如下[TestUploadFile2.aspx、uploadFile.aspx]

1) 前台客户端代码,其中TestUploadFile2.aspx的代码如下,TestUploadFile2.aspx.cs文件中只使用默认的代码,不用添加任何代码。
TestUploadFile2.aspx
Html代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestUploadFile2.aspx.cs" Inherits="TestUploadFile2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfupload/swfupload.js"></script>
<script type="text/javascript" src="simpledemo/js/swfupload.queue.js"></script>
<script type="text/javascript" src="simpledemo/js/fileprogress.js"></script>
<script type="text/javascript" src="simpledemo/js/handlers.js"></script>
<script type="text/javascript">
        var swfu;

        window.onload = function() {
            var settings = {
                flash_url : "../swfupload/swfupload.swf",
                upload_url: "uploadFile.aspx",
                post_params: {
                    "ASPSESSID": "<%=Session.SessionID %>"
                },
                file_size_limit : "100 MB",
                file_types : "*.*",    //这是全部文件都可以上传,如果要限制只有某些文件上传,则可以这么写 file_types : "*.jpg;*.gif;*.png",
                file_types_description : "All Files",
                file_upload_limit : 100,
                file_queue_limit : 0,
                custom_settings : {
                    progressTarget : "fsUploadProgress",
                    cancelButtonId : "btnCancel"
                },
                debug: false,

                // Button settings

               //这儿是swfupload v2新增加的功能,由于flash player 10的安全性的提高所以增加了此功能。

              //在SWFUpload v2中,不能再使用html的button来触发SWFUpload,必须使用定制的Button,这其中比较要注意的是,button不能再用css控制,需要用图片来显示

                button_image_url: "images/XPButtonNoText_160x22.png",
                button_placeholder_id: "spanButtonPlaceholder",
                button_width: 160,
                button_height: 22,
                button_text: '<span class="button">&nbsp; &nbsp;选择文件 &nbsp;  &nbsp;<span class="buttonSmall">(2 MB 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,
                
                // The event handler functions are defined in handlers.js
                file_queued_handler : fileQueued,
                file_queue_error_handler : fileQueueError,
                file_dialog_complete_handler : fileDialogComplete,
                upload_start_handler : uploadStart,
                upload_progress_handler : uploadProgress,
                upload_error_handler : uploadError,
                upload_success_handler : uploadSuccess,
                upload_complete_handler : uploadComplete,
                queue_complete_handler : queueComplete    // Queue plugin event
            };

            swfu = new SWFUpload(settings);
         };
</script>
</head>
<body>
<div id="content">
    <h2>一次选择多个文件进行上传</h2>
    <form id="form1" runat="Server">
    

    <div>
                <span id="spanButtonPlaceHolder"></span>
                <input id="btnCancel" type="button" value="取消全部上传" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 22px;" />
            </div>
                <p>&nbsp;</p>
            <div class="fieldset flash" id="fsUploadProgress">
            <span class="legend">Upload Queue</span>
            </div>
        <div id="divStatus">0 个文件已经上传</div>
        

    </form>
</div>
</body>
</html>

以上代码最后的显示结果如图:


 

                                     图3.

2)后台服务器端代码:uploadFile.aspx文件中使用默认的代码,不需要添加任何代码。uploadFile.aspx.cs文件的代码如下:
uploadFile.aspx.cs


using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

public partial class net_uploadFile : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
      

         Response.CacheControl = "no-cache";
        string  s_rpath =@"E:\WebSites\SWFUpload\demos\applicationdemo.net\";
      
              
                string Datedir = DateTime.Now.ToString("yy-MM-dd");
                string updir = s_rpath + "\\" + Datedir;
                if (this.Page.Request.Files.Count > 0)
                {
                    try
                    {

                        for (int j = 0; j < this.Page.Request.Files.Count; j++)
                        {

                            HttpPostedFile uploadFile = this.Page.Request.Files[j];

                            if (uploadFile.ContentLength > 0)
                            {
                                if (!Directory.Exists(updir))
                                {
                                    Directory.CreateDirectory(updir);
                                }
                                string extname = Path.GetExtension(uploadFile.FileName);
                                string fullname=DateTime.Now.Year.ToString()+DateTime.Now.Month.ToString()+DateTime.Now.Day.ToString()+ DateTime.Now.Hour.ToString()+DateTime.Now.Minute.ToString()+DateTime.Now.Second.ToString();
                                string filename = uploadFile.FileName;

                                uploadFile.SaveAs(string.Format("{0}\\{1}", updir, filename));
                            }
                        }
                    }
                    catch (Exception ex)
                    {
                        Response.Write("Message"+ ex.ToString());
                    }

           
        }
    }
    }





第四步,如果使用以上代码,在具体的应用中不能使用或是ie可行,ff不行,则需要在Global.asax文件中添加以下代码。
如果Global.asax文件不存在,则请在应用的根目录中创建。


<%@ Application Language="C#" %>

<script runat="server">

    void Application_BeginRequest(object sender, EventArgs e)
    {
        /* Fix for the Flash Player Cookie bug in Non-IE browsers.
         * Since Flash Player always sends the IE cookies even in FireFox
         * we have to bypass the cookies by sending the values as part of the POST or GET
         * and overwrite the cookies with the passed in values.
         *
         * The theory is that at this point (BeginRequest) the cookies have not been read by
         * the Session and Authentication logic and if we update the cookies here we'll get our
         * Session and Authentication restored correctly
         */

        try
        {
            string session_param_name = "ASPSESSID";
            string session_cookie_name = "ASP.NET_SESSIONID";

            if (HttpContext.Current.Request.Form[session_param_name] != null)
            {
                UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]);
            }
            else if (HttpContext.Current.Request.QueryString[session_param_name] != null)
            {
                UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]);
            }
        }
        catch (Exception)
        {
            Response.StatusCode = 500;
            Response.Write("Error Initializing Session");
        }

        try
        {
            string auth_param_name = "AUTHID";
            string auth_cookie_name = FormsAuthentication.FormsCookieName;

            if (HttpContext.Current.Request.Form[auth_param_name] != null)
            {
                UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]);
            }
            else if (HttpContext.Current.Request.QueryString[auth_param_name] != null)
            {
                UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]);
            }

        }
        catch (Exception)
        {
            Response.StatusCode = 500;
            Response.Write("Error Initializing Forms Authentication");
        }
    }
    void UpdateCookie(string cookie_name, string cookie_value)
    {
        HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);
        if (cookie == null)
        {
            cookie = new HttpCookie(cookie_name);
            HttpContext.Current.Request.Cookies.Add(cookie);
        }
        cookie.Value = cookie_value;
        HttpContext.Current.Request.Cookies.Set(cookie);
    }
           
</script>

第五步,在进行上传之后的结果如图:

 

 

 最后的关于swfupload v2版的一些说明:

 

void selectFile()
不赞成使用,不兼容Flash Player 10
弹出flash的文件选择对话框,只能选择单个文件。

void selectFiles()
不赞成使用,不兼容Flash Player 10
弹出flash的文件选择对话框,可一次性选择多个文件。

 

 

关于上面的demo代码。其中swfupload使用的是v2.2 。

相关文章推荐

javascript uncaught exception:Could not find the placeholder eement

javascript uncaught exception:Could not find the placeholder eement

swfupload too much recursion

今天在使用swfupload.js(版本号:2.2.0.1)这个js和flash的文件上传插件的时候,出现了一个bug,也就是我们常说的栈溢出,内存溢出。 swfupload too much re...

[SWFUpload] 上传按钮的样式问题

swfupload 这个上传插件,调整上传按钮是个巨坑。 Q:我设置了button_text为什么文字没显示出来? A:先设置button_image_url,换个背景图片 Q:我设置了but...
  • szx1999
  • szx1999
  • 2017年09月19日 15:13
  • 215

文件上传利器SWFUpload入门简易教程

凡做过网站开发的都应该知道表单file的确鸡肋。 Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame,...
  • kongjiea
  • kongjiea
  • 2014年04月22日 09:36
  • 32867

flash上传组件swfupload的坑点及解决方法

前两天的文章说了项目中因为使用swfupload组件过程中,遇到一特殊需求无法满足,自己写了一个用iframe + form方案实现的异步处理方案。 今天就来总结归纳一下swfupload组件使用过程...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

重写jquery.confirm.js 摆脱传统alert confirm 插件供下载(一)

这是一个伟大的插件,虽然200行代码不到,而且bug很多,但是我真的很用心去写了啊。...
  • aphy358
  • aphy358
  • 2015年11月06日 23:31
  • 3320

重写alert,重写messgae,重写confirm

  1.     Jquery的弹出窗口(Simple Modal)         可以写成这样

分割器使用注意事项

  • 2014年05月22日 20:56
  • 31KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SWFUpload 使用及注意事项
举报原因:
原因补充:

(最多只允许输入30个字)