asp.net使用swfupload上传

时间：2015-4-23类别：编程学习

asp.net使用swfupload上传

asp.net使用swfupload上传

一、swfupload文件上传特点

1、可选择多个文件上传

2、类似ajax局部刷新效果

3、可显示上传进度

4、选择文件时，可以过滤文件类型

5、良好的浏览器兼容性

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

二、SWFUpload的文件上传流程

1、引入相应的js文件

2、实例化SWFUpload对象，传入一个配置参数对象进行各方面的配置。

3、点击SWFUpload提供的Flash按钮，弹出文件选取窗口选择要上传的文件；

4、文件选取完成后符合规定的文件会被添加到上传的队列里；

5、调用startUpload方法让队列里文件开始上传；

6、文件上传过程中会触发相应的事件，开发者利用这些事件来更新ui、处理错误、发出提示等等；

三、SWFUpload属性介绍

属性	类型	默认值	描述
upload_url	String		处理上传文件的服务器端页面的url地址，可以是绝对地址，也可以是相对地址，当为相对地址时相对的是当前代码所在的文档地址
preserve_relative_urls	Boolean	false	如果为false则SWFUpload会把swfupload.swf用到的相对地址转换为绝对地址，以达到更好的兼容性
file_post_name	String	Filedata	相当于用普通的文件域上传文件时的name属性，服务器端接收页面通过该名称来获取上传的文件
post_params	Object(直接量)		一个对象直接量，里面的键/值对会随着每一个文件一起上传，文件上传要附加一些信息时很有用
use_query_string	Boolean	false	为false时,post_params属性定义的参数会以post方式上传；为true时，则会以get方式上传（即参数会以查询字符串的形式附加到url后面）
file_types	String		该属性指定了允许上传的文件类型，当有多个类型时使用分号隔开，比如：.jpg;.png ,允许所有类型时请使用 .
file_types_description	String		指定在文件选取窗口中显示的文件类型描述，起一个提示和说明的作用吧
file_size_limit	String		指定要上传的文件的最大体积，可以带单位，合法的单位有:B、KB、MB、GB，如果省略了单位，则默认为KB。该属性为0时，表示不限制文件的大小。
file_upload_limit	Number		指定最多能上传多少个文件，当上传成功的文件数量达到了这个最大值后，就不能再上传文件了，也不能往上传队列里添加文件了。把该属性设为0时表示不限制文件的上传数量。
file_queue_limit	Number		指定文件上传队列里最多能同时存放多少个文件。当超过了这个数目后只有当队列里有文件上传成功、上传出错或被取消上传后，等同数量的其他文件才可以被添加进来。当file_upload_limit的数值或者剩余的能上传的文件数量小于file_queue_limit时，则取那个更小的值
flash_url	String		swfupload.swf文件的绝对或相对地址，相对地址是指相对于当前的页面地址。实例化swfupload后，就不能再改变该属性的值了。
prevent_swf_caching	Boolean		为true时会加一个随机数在swfupload.swf地址的后面，以阻止flash影片被缓存，这是为了防止某些版本的IE浏览器在读取缓存的falsh影片时出现的bug
button_placeholder_id	String		指定一个dom元素的id,该dom元素在swfupload实例化后会被Flash按钮代替，这个dom元素相当于一个占位符
button_placeholder	DOMElement		指定一个dom元素,该dom元素在swfupload实例化后会被Flash按钮代替，这个dom元素相当于一个占位符。当button_placeholder_id与button_placeholder都存在时，以button_placeholder_id为优先
button_image_url	String		指定Flash按钮的背景图片，相对地址或绝对地址都可以。该地址会受到preserve_relative_urls属性的影响，遵从与upload_url一样的规则。该背景图片必须是一个sprite图片,从上到下包含了Flash按钮的正常、鼠标悬停、按下、禁用这四种状态。因此该图片的高度应该是Flash按钮高度的四倍
button_width	Number		指定Flash按钮的宽度
button_height	Number		指定Flash按钮的高度，应该为button_image_url所指定的按钮背景图片高度的1/4
button_text	String		指定Flash按钮上的文字，也可以是html代码
button_text_style	String		Flash按钮上的文字的样式，使用方法见示例
button_text_top_padding	Number		指定Flash按钮顶部的内边距，可使用负值
button_text_left_padding	Number		指定Flash按钮左边的内边距，可使用负值
button_disabled	Boolean	false	为true时Flash按钮将变为禁用状态，点击也不会触发任何行为
button_cursor			指定鼠标悬停在Flash按钮上时的光标样式，可用值为SWFUpload.CURSOR里定义的常量
button_window_mode			指定Flash按钮的WMODE属性，可用值为SWFUpload.WINDOW_MODE里定义的常量
file_dialog_start_handler	Function		fileDialogStart事件侦听函数
file_queued_handler	Function		fileQueued事件侦听函数
file_queue_error_handler	Function		fileQueueError事件侦听函数
file_dialog_complete_handler	Function		fileDialogComplete事件侦听函数
upload_start_handler	Function		uploadStart事件侦听函数
upload_progress_handler	Function		uploadProgress事件侦听函数
upload_error_handler	Function		uploadError事件侦听函数
upload_success_handler	Function		uploadSuccess事件侦听函数
upload_complete_handler	Function		uploadComplete事件侦听函数

四、asp.net使用swfupload上传实例

1、上传的aspx主页面

HTML 代码复制


<!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>DemoUpload</title>
    
    <link href="css.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="swfupload/swfupload.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" src="js/filegroupprogress.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",
                upload_url: "upload.ashx",
                file_size_limit: "100 MB",
                file_types: "*.*",
                file_types_description: "All Files",
                file_upload_limit: 100,
                file_queue_limit: 0,
                custom_settings: ...{

                    progressTarget: "liprogresscontainer",
                    progressGroupTarget : "liprogressGroup",
                    
                    //progress object
                    container_css: "progressobj",
                    icoNormal_css: "IcoNormal",
                    icoWaiting_css: "IcoWaiting",
                    icoUpload_css: "IcoUpload",
                    fname_css : "fle ftt",
                    state_li_css : "statebarSmallli",
                    state_bar_css : "statebar",
                    percent_css : "ftt",
                    href_delete_css : "ftt",

                    //sum object
                    /**//*
                        页面中不应出现以"cnt_"开头声明的元素
                    */
                    s_cnt_progress: "cnt_progress",
                    s_cnt_span_text : "fle",
                    s_cnt_progress_statebar : "cnt_progress_statebar",
                    s_cnt_progress_percent: "cnt_progress_percent",
                    s_cnt_progress_uploaded : "cnt_progress_uploaded",
                    s_cnt_progress_size : "cnt_progress_size"
                },
                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">上传文件</span>',
                button_text_style: ".theFont { font-size: 12;color:#0068B7; }",
                button_text_left_padding: 12,
                button_text_top_padding: 3,

                // The event handler functions are defined in handlers.js
                file_queued_handler: fileQueued,
                file_queue_error_handler: fileQueueError,
                upload_start_handler: uploadStart,
                upload_progress_handler: uploadProgress,
                upload_error_handler: uploadError,
                upload_success_handler: uploadSuccess,
                upload_complete_handler:uploadComplete,
                file_dialog_complete_handler: fileDialogComplete
            };
            swfu = new SWFUpload(settings);            
        };
        
    </script>    
</head>
<body>
    <form id="frmMain" action="upload.ashx" runat="server" enctype="multipart/form-data">
    <span id="spanButtonPlaceHolder"></span>
    <li id="liprogresscontainer"></li>
    <li id="liprogressGroup"></li>
    </form>
</body>
</html>

2、swfupload.queue.js代码

JScript 代码复制


var SWFUpload;
if (typeof(SWFUpload) === "function") ...{
    SWFUpload.queue = ...{};
    
    SWFUpload.prototype.initSettings = (function (oldInitSettings) ...{
        return function () ...{
            if (typeof(oldInitSettings) === "function") ...{
                oldInitSettings.call(this);
            }
            
            this.queueSettings = ...{};
            
            this.queueSettings.queue_cancelled_flag = false;
            this.queueSettings.queue_upload_count = 0;
            
            this.queueSettings.user_upload_complete_handler = this.settings.upload_complete_handler;
            this.queueSettings.user_upload_start_handler = this.settings.upload_start_handler;
            this.settings.upload_complete_handler = SWFUpload.queue.uploadCompleteHandler;
            this.settings.upload_start_handler = SWFUpload.queue.uploadStartHandler;
            
            this.settings.queue_complete_handler = this.settings.queue_complete_handler || null;
        };
    })(SWFUpload.prototype.initSettings);

    SWFUpload.prototype.startUpload = function (fileID) ...{
        this.queueSettings.queue_cancelled_flag = false;
        this.callFlash("StartUpload", [fileID]);
    };

    SWFUpload.prototype.cancelQueue = function () ...{
        this.queueSettings.queue_cancelled_flag = true;
        this.stopUpload();
        
        var stats = this.getStats();
        while (stats.files_queued > 0) ...{
            this.cancelUpload();
            stats = this.getStats();
        }
    };
    
    SWFUpload.queue.uploadStartHandler = function (file) ...{
        var returnValue;
标签：文件上传

asp.net使用swfupload上传

asp.net使用swfupload上传

猜您喜欢

热门推荐