`
小杨学JAVA
  • 浏览: 901486 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

SWFUpload浅析

 
阅读更多

转:http://www.chinasb.org/archives/2010/12/1214.shtml

一、简介和示例

SWFUpload is a small JavaScript/Flash library to get the best of both worlds. It features the great upload capabilities of Flash and the accessibility and ease of HTML/CSS。

官方站点:http://www.swfupload.org/

简单来说,swfupload这个上传库是可以显示上传进度以及上传速度等上传信息。一般实现这种上传体验有2种方式,一种是异步上传,在服务器端边接收数据边往session写入接收的字节数和进度数据,然后客户端轮询这个记录在session的进度数据并回显到页面。第二种方式就是采用flash来上传,也就是swfupload所采用的方式,在发送过程中将发送的相关状态数据回传到js的函数中处理。

下面是一个单个文件上传的使用示例,简单的创建一个SWFUpload对象,并传入相关的事件处理和参数就可以了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                // Backend settings
                upload_url: "/upload",
                file_post_name: "image",
                // Flash file settings
                file_size_limit : "10 MB",
                file_types : "*.*",         // or you could use something like: "*.doc;*.wpd;*.pdf",
                file_types_description : "All Files",
                file_upload_limit : "0",
                file_queue_limit : "5",
                // Event handler settings
                swfupload_loaded_handler : swfUploadLoaded,
 
                file_dialog_start_handler: fileDialogStart,
                file_queued_handler : fileQueued,
                file_queue_error_handler : fileQueueError,
                file_dialog_complete_handler : fileDialogComplete,
 
                //upload_start_handler : uploadStart,   // I could do some client/JavaScript validation here, but I don't need to.
                upload_progress_handler : uploadProgress,
                upload_error_handler : uploadError,
                upload_success_handler : uploadSuccess,
                upload_complete_handler : uploadComplete,
                // Button Settings
                button_image_url : "/static/images/XPButtonUploadText_61x22.png",
                button_placeholder_id : "spanButtonPlaceholder", //flash元素要替代的html元素
                button_width: 61,
                button_height: 22,
 
                // Flash Settings
                flash_url : "/static/swf/swfupload.swf",
                custom_settings : {
                    progress_target : "fsUploadProgress",
                    upload_successful : false
                },
}

 

二、参数说明

原理是很明显易懂的,关键是flash和javascript的通讯部分,在文件上传的各个状态都会有javascript和flash函数的相互回调。目前主要研究了上传单个文件的上传逻辑,swfupload支持多个文件上传的,不过核心的逻辑应该是没有太多的变化。swfupload用一个队列来管理多个文件上传的,因为在传入的参数中会有一些队列和文件上传数量相关的参数。

在其核心的JavaScript文件swfupload.js定义的状态码以及从flash传递到js的文件对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
//文件对象
file = {
    "id":SWFUpload_0_0,
    "index":0,
    "filestatus":-1,
    "name":vim-cheat-sheet-diagram.png,
    "size":317949,
    "type":"",
    "creationdate":Fri Jan 16 1970 00:08:13 GMT+0800 (CST),
    "modficationdate":Fri Jan 16 1970 00:08:13 GMT+0800 (CST),
    "post": {}
}
 
//文件队列错误码
SWFUpload.QUEUE_ERROR = {
    QUEUE_LIMIT_EXCEEDED            : -100,
    FILE_EXCEEDS_SIZE_LIMIT         : -110,
    ZERO_BYTE_FILE                  : -120,
    INVALID_FILETYPE                : -130
};
 
//上传错误码
SWFUpload.UPLOAD_ERROR = {
    HTTP_ERROR                      : -200,
    MISSING_UPLOAD_URL              : -210,
    IO_ERROR                        : -220,
    SECURITY_ERROR                  : -230,
    UPLOAD_LIMIT_EXCEEDED           : -240,
    UPLOAD_FAILED                   : -250,
    SPECIFIED_FILE_ID_NOT_FOUND     : -260,
    FILE_VALIDATION_FAILED          : -270,
    FILE_CANCELLED                  : -280,
    UPLOAD_STOPPED                  : -290
};
 
//文件状态
SWFUpload.FILE_STATUS = {
    QUEUED       : -1,
    IN_PROGRESS  : -2,
    ERROR        : -3,
    COMPLETE     : -4,
    CANCELLED    : -5
};
 
//按钮的动作
SWFUpload.BUTTON_ACTION = {
    SELECT_FILE  : -100,
    SELECT_FILES : -110,
    START_UPLOAD : -120
};

 

1. 事件处理函数

事件函数 触发时间 参数
swfupload_loaded_handler 在flash初始化完成之后 没有参数
file_dialog_start_handler 当用户点击上传按钮,在打开文件浏览窗口之前 没有参数
file_queued_handler 用户成功地选择了文件,在file_dialog_complete_handler事件之前触发。如果选择了多个文件,则触发多次 file文件对象
file_queue_error_handler 文件上传数量、类型、大小不符合时 file文件对象、错误码、从flash中返回的错误信息
file_dialog_complete_handler 在用户成功了选择了文件后,在所有file_queued_handler之后触发 选择文件的数量、加入了文件队列的文件数量、在当前文件队列总共的文件数量
upload_start_handler 用户点击了提交按钮,开始把文件上传到服务器 file文件对象
upload_progress_handler 刚打开与服务器的连接与文件上传过程中 file文件对象、已经上传的字节数、总共要上传的字节数
upload_error_handler 上传失败时 file文件对象、错误码、从flash中返回的错误信息
upload_success_handler 文件上传成功或者等待服务器数据返回超时 file文件对象、服务器返回的数据、服务器是否有返回数据
upload_complete_handler 上传完成时,在upload_success_handler之后触发 file文件对象
debug_handler 调用SWFUpload对象的debug()函数时 swfupload对象和其初始化的参数

2. 其他重要参数

参数名 意义 说明
upload_url 要上传到的服务器地址  
file_post_name 上传到服务器中文件内容对应的key  
flash_url flash元素的url  
custom_settings 自定义的参数,可以在事件处理函数中获取得到 dict类型
button_placeholder_id flash的上传按钮显示在html的位置,此名称的元素会被替换成object元素 span即可

三、上传逻辑

下面是用graphviz画出来的流程图,图比较大,不过看得舒服:)
1. 如上面的示例代码所示,在javascript代码中首先要创建一个SWFUpload的javascript对象,这个对象创建的初始化逻辑如下(箭头表示逻辑和流程的走向):

2. 当javascript将object元素添加到html页面的元素中时,即初始化flash中的元素:

3.用户点击上传的按钮,准备选择文件时,这个已经绑定了按钮的点击事件,而这个按钮不是input而是一个flash的元素:

4.用户选择完文件后:

5. 用户点击提交按钮,文件开始上传到服务器:

6. 文件上传过程中的一些事件处理逻辑:

分享到:
评论

相关推荐

    swfupload

    SWFUpload 是一款开源的Flash上传组件,广泛应用于网页中的文件上传功能,尤其适用于需要大文件分块上传或批量上传的场景。它利用Flash技术在浏览器端实现无刷新、多文件选择上传,提供了友好的用户界面和丰富的...

    swfupload flash上传兼容所有浏览器

    SWFUpload 是一款开源的Flash上传组件,它在过去的网页开发中被广泛使用,尤其在应对多文件上传和处理大文件上传时具有显著优势。它的核心功能是利用Flash技术实现跨浏览器的文件上传,即便是在那些不支持HTML5的旧...

    SWFupload

    SWFupload是一个经典的文件上传组件,它利用JavaScript和Flash技术,为用户提供了一种高效、便捷的多文件上传功能。在Web应用中,尤其是在处理大量用户文件上传时,SWFupload的出现极大地改善了用户体验,避免了传统...

    swfupload xss 注入修复

    *swfUpload/Flash/swfupload.swf?movieName=aaa"])}catch(e){(alert)(1)};// *解决swfupload-xss注入,自己项目中遇到的,已经修改 亲测通过 *将文件中的swf文件替换掉项目中的swf文件 *将swfupload.as文件替换掉...

    swfupload asp版 asp上传大文件,批里上传

    SWFUpload 是一个开源的JavaScript库,用于在网页上实现高级的文件上传功能。它尤其适合处理大文件和批量上传,提供了用户友好的界面,包括进度条显示,从而提升了用户体验。在ASP环境中,SWFUpload 可以很好地解决...

    swfupload上传demo示例

    SwfUpload 是一款经典的Flash基于的文件上传组件,它允许用户在网页中实现多文件同时上传的功能。在本文中,我们将深入探讨SwfUpload的工作原理、如何与ThinkPHP框架结合使用,以及如何处理配置和SQL文件。 ...

    mvc下swfupload实例

    **SwfUpload 知识点详解** SwfUpload 是一个流行的JavaScript库,它允许在Web应用程序中实现高级的文件上传功能。它通过Flash插件在后台处理大文件上传,提供了多文件选择、进度条显示、预览图片等功能,极大地提升...

    SWFUpload_V2.2.0

    SWFUpload 是一款开源的JavaScript库,主要用于在网页上实现多文件上传功能。这个库以其高效、稳定和灵活的特点在Web开发中得到了广泛的应用。在SWFUpload_V2.2.0版本中,它提供了更加强大的上传能力,并且对用户...

    swfupload说明

    **SWFUpload 知识点详解** SWFUpload 是一个开源的JavaScript库,它允许网页在后台上传文件,尤其适用于处理大文件上传,无需刷新页面。这个工具在Web开发中非常实用,因为它提供了友好的用户体验,同时提高了上传...

    swfupload文件上传源码ASP

    SWFUpload是一个流行的JavaScript库,它允许在网页中实现Flash技术的文件上传功能。这个"SWFUpload文件上传源码ASP"是针对ASP(Active Server Pages)开发的,旨在为ASP应用程序提供一个用户友好的多文件上传解决...

    SwfUpload 多文件上传

    SwfUpload 是一款开源的Flash上传组件,它允许用户在网页上实现多文件上传功能,尤其适用于需要大文件上传或批量上传的场景。这个技术在Web开发中被广泛应用,因为它可以提供比传统HTML表单上传更好的用户体验。...

    swfupload sample

    SWFUpload 是一款开源的JavaScript库,主要用于在网页上实现文件的上传功能,尤其是大文件的分块上传。它利用了Adobe Flash技术,因此在早期HTML5的File API不广泛支持时,SWFUpload成为了一个优秀的文件上传解决...

    SwfUpload文件上传demo

    SwfUpload 是一个开源的JavaScript库,用于在Web应用程序中实现多文件上传功能。它结合了Flash技术,能够在不支持HTML5的浏览器上提供高级的文件上传体验。在这个"SwfUpload文件上传demo"中,我们可以深入理解...

    swfupload网友修改版

    SWFUpload是一款经典的JavaScript与Flash混合的文件上传组件,它允许用户在网页上实现多文件选择上传,并且具有预览、进度条显示等高级功能。这个"swfupload网友修改版"很可能是在原版基础上进行了一些优化或者定制...

    swfupload实例]SWFUpload_java实例.doc

    ### SWFUpload与Java实例详解 #### SWFUpload概述 SWFUpload是一个强大的Flash和JavaScript组件,用于实现浏览器上的多文件无刷新上传功能。通过利用Flash技术,它能够跨浏览器和平台提供一致的用户体验,同时提供...

    SWFUpload v2.5.0版

    SWFUpload v2.5.0版SWFUpload v2.5.0版SWFUpload v2.5.0版SWFUpload v2.5.0版SWFUpload v2.5.0版SWFUpload v2.5.0版SWFUpload v2.5.0版SWFUpload v2.5.0版SWFUpload v2.5.0版SWFUpload v2.5.0版

    swfupload多文件上传带进度条实例

    **SWFUpload 多文件上传带进度条实例详解** SWFUpload 是一款开源的JavaScript库,专门用于在网页上实现文件的多选上传,并且支持显示上传进度条,为用户提供更好的交互体验。在这个实例中,我们将探讨如何在VS2012...

    swfupload(new)swfupload(new)swfupload(new)

    swfupload(new)swfupload(new)swfupload(new)swfupload(new)swfupload(new)swfupload(new)swfupload(new)swfupload(new)swfupload(new)swfupload(new)swfupload(new)

    swfupload --forms改版

    **SWFUpload -- Forms 改版详解** SWFUpload 是一款经典的JavaScript库,它允许网页在不离开页面的情况下实现文件上传功能,尤其适用于大文件上传和多文件选择。"swfupload --forms改版"指的是对原SWFUpload库进行...

Global site tag (gtag.js) - Google Analytics