学步园

swfupload 是一个客户端文件上传工具，它通过整合Flash与JavaScript技术为web开发人员提供了一个具有丰富功能超越传统<input type="file" />标签的文件上传模式。目前swfupload最新版本为V2.2.0，支持Flash Player 10 和9，不支持flash player8。swfupload 网址:http://swfupload.org/

在使用过程中遇到的值得记录的地方。

 1.在官方给的demo中(applicationdemo.net)，有三个页面Default.aspx,upload.aspx,thumbnail.aspx。因为我要做的是上传多个文件到文件系统中，所有我需要关注的是Default.aspx,upload.aspx两个页面。Default页面用于用户选择上传文件，upload页面接收swfupload发送过来的文件数据，在upload后台Page_Load方法中用下面的语句接收

HTMLPostedFile hpf = Request.Files["Filedata"];

 2.default.aspx

    <link href="CSS/uploadProgress.css" type="text/css" rel="Stylesheet" />
    <script type="text/javascript" src="js/swfupload.js"></script>
    <script type="text/javascript" src="js/handlers.js"></script>
    <script type="text/javascript" src="js/swfupload.queue.js"></script>
    <script type="text/javascript" src="js/fileprogress.js"></script>
    
    <script type="text/javascript">
        var swfu;
        var clientName;
        var projectName;
        var conceptName;
        var projectId;
        var conceptId;
        var ddlClient;
        var ddlProject;
        var ddlConcept;

        window.onload = function() {
            swfu = new SWFUpload({
                // Backend Settings
                upload_url: "upload.aspx",
                post_params: {
                    "ASPSESSID": "<%=Session.SessionID %>", 
                      // 此处定义需要传递至upload.aspx页面的一些变量
                    "param_client": "clientName",
                    "param_project": "projectName",
                    "param_projectId": "projectId",
                    "param_concept": "conceptName",
                    "param_conceptId":"conceptId"
                },
                // user_query_string 设为true,可以使swfuplpoad通过QueryString传递post_params
                use_query_string: true,
                // File Upload Settings
                file_size_limit: "5 MB",
                file_types: "*.swf",
                file_types_description: "Flash",
                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,
                file_dialog_start_handler: fileDialogStart,
                file_queued_handler: fileQueued,
                upload_start_handler: uploadStart,

                // Button settings
                button_image_url: "images/XPButtonNoText_160x22.png",
                button_placeholder_id: "spanButtonPlaceholder",
                button_width: 160,
                button_height: 22,
                button_text: '<span>Select Flash (5 MB Max)</span>',
                button_text_top_padding: 1,
                button_text_left_padding: 5,

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

                custom_settings: {
                    progressTarget: "divUploadProgress",
                    uploadButtonId: "btnUpload",
                    cancelButtonId: "btnCancel"
                },

                // Debug Settings
                debug: false
            });

        //    ddlClientName();
       //     ddlProjectName();
       //     ddlConceptName();

        }

        function ddlClientName() {
              // do something here 以及赋给clientName有意义的值
            swfu.addPostParam("param_client", clientName);   // 将clientName值赋给param_client
        }
        function ddlProjectName() {
              // do something here
            swfu.addPostParam("param_project", projectName);
            swfu.addPostParam("param_projectId", projectId);
        }
        function ddlConceptName() {
            // do something here
            swfu.addPostParam("param_concept", conceptName);
            swfu.addPostParam("param_conceptId", conceptId);
        }
    </script>

3.原本在window.onload中调用ddlClientName() ,ddlProjectName(),ddlConceptName() 三个函数，但一直出现
“uncaught exception: call to SetPostParams failed” 错误（FF 3.5.3中），原因是此时swfu还未完全载入，遂将对这三个函数的调用放入handlers.js中fileDialogStart()函数中：

function fileDialogStart() {
    /**//* I don't need to do anything here */
    // when dialog is opened,assign post params with specific value
    ddlClientName();
    ddlProjectName();
    ddlConceptName();
}

 

对应上传部分的HTML：

<div id="content">
    <div id="swfu_container">
        <div id="divUploadButton">
            <span id="spanButtonPlaceholder"></span>
        </div>
        <div id="divUploadProgress"></div>
    </div>
</div>
<div class="divUploadCancel">
    <input id="btnUpload" type="button" value="Upload" onclick="swfu.startUpload()" />
    <input id="btnCancel" type="button" value="Cancel Upload" disabled="disabled" onclick="cancelQueue(swfu)" />
</div>
<div><asp:Label id="Label1" runat="server" ForeColor="Red" Text="errror message"  /></div>

 

upload.aspx.cs:

        protected void Page_Load(object sender, EventArgs e) {
            try
            {
                HttpPostedFile upload = Request.Files["FileData"];
                // 获得文件保存路径
                string path = ConfigurationManager.AppSettings["UploadBannerPath"];
                string client = Request.QueryString["param_client"].ToString();
                string project = Request.QueryString["param_project"].ToString();
                int projectId = Convert.ToInt32(Request.QueryString["param_projectId"]);
                string concept = Request.QueryString["param_concept"].ToString();
                int conceptId = Convert.ToInt32(Request.QueryString["param_conceptId"]);

                string fileName = Path.GetFileName(upload.FileName);
                path += "\\" + client + "\\" + project + "\\" + concept;
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }

                SaveRecordToDB(fileName, client, project, projectId, concept, conceptId);

                // 保存文件
                upload.SaveAs(path + "\\" + fileName);
                // 返回状态码
                Response.StatusCode = 200;
                Response.Write("Success");
            }
            catch
            {
                Response.StatusCode = 500;
                Response.Write("An error occured");
                Response.End();
            }
            finally
            {
                Response.End();
            }
        }

 下面是一些截图：

（1）选择文件后：

（2）点击Upload按钮：

 

 附：swfupload 中文帮助文档：http://www.v-sky.com/doc/swfupload/Documentation.html