SWFUpload - JQuery上传插件

时间：2022-08-29 16:55:50

首先，大家可以去SWF的官网下载相关Demo或者源码。

官方地址：http://code.google.com/p/swfupload/

官方Demo：http://demo.swfupload.org/v220/

 先新建一个项目，并从官网上下载最新的版本解压后添加到项目中。 

 在相应上传文件的html页，引用下载好的css、js文件，代码如下：

<!DOCTYPE html>
<html>
<head>
<title>SWFUpload Demos - Simple Demo</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="../swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="js/fileprogress.js"></script>
<script type="text/javascript" src="js/handlers.js"></script>
<script type="text/javascript">
        var swfu;

        window.onload = function() {
            var settings = {
                flash_url : "../swfupload/swfupload.swf",
                flash9_url : "../swfupload/swfupload_fp9.swf",
                upload_url: "../../UploadHandler.ashx",  //上传处理
                file_size_limit : "100 MB",
                file_types : "*.*",
                file_types_description : "All Files",
                file_upload_limit : 100,
                file_queue_limit : 0,
                custom_settings : {
                    progressTarget : "fsUploadProgress",
                    cancelButtonId : "btnCancel"
                },
                debug: false,

                // Button settings
                button_image_url: "images/TestImageNoText_65x29.png",
                button_width: "65",
                button_height: "29",
                button_placeholder_id: "spanButtonPlaceHolder",
                button_text: '<span class="theFont">Hello</span>',
                button_text_style: ".theFont { font-size: 16; }",
                button_text_left_padding: 12,
                button_text_top_padding: 3,
                
                // The event handler functions are defined in handlers.js
                swfupload_preload_handler : preLoad,
                swfupload_load_failed_handler : loadFailed,
                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="header">
    <h1 id="logo"><a href="../">SWFUpload</a></h1>
    <div id="version">v2.5.0</div>
</div>

<div id="content">
    <h2>Simple Demo</h2>
        <p>This page demonstrates a simple usage of SWFUpload.  It uses the Queue Plugin to simplify uploading or cancelling all queued files.</p>

            <div class="fieldset flash" id="fsUploadProgress">
            <span class="legend">Upload Queue</span>
            </div>
        <div id="divStatus">0 Files Uploaded</div>
            <div>
                <span id="spanButtonPlaceHolder"></span>
                <input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
            </div>

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

 在项目中添加UploadHandler.ashx文件用来处理文件的上传，并在项目中添加UploadFile文件夹，用来存放上传的文件。

 UploadHandler类的ProcessRequest方法代码如下：

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";   
    context.Response.Charset = "utf-8";   

    HttpPostedFile file = context.Request.Files["Filedata"];   
    string  uploadPath = 
        HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";  

    if (file != null)  
    {  
       if (!Directory.Exists(uploadPath))  
       {  
           Directory.CreateDirectory(uploadPath);  
       }   
       file.SaveAs(uploadPath + file.FileName);  
        //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
       context.Response.Write("1");  
    }   
    else  
    {   
        context.Response.Write("0");   
    }  
}

 简单的SWFUpload模型就架构完毕，运行后选择文件上传，就可以在UploadFile中找到了。

标签：

相关文章