SWFUpload的主要特点,网上的例子介绍的文档真的

作者: 编程  发布:2019-11-23

var swfu; window.onload = function() { var settings = { flash_url : "js/swfupload_f9.swf", //flash地址 upload_url: "upload.php", //上传文件处理地址 post_params: {"PHPSESSID" : "“}, file_size_limit : “1000″, //大小限制 默认单位为kb file_types : “*.jpg;*.gif;*.png;*.swf”,//文件类型 file_types_description : “Web Image Files”,//文件类型描述 file_upload_limit : 100,//上传文件限制 file_queue_limit : 0, custom_settings : { progressTarget : “fsUploadProgress”, cancelButtonId : “btnCancel” }, debug: false, 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 }; swfu = new SWFUpload; };

什么是SWFUpload?
  SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。
[编辑本段]SWFUpload的主要特点
  * 可以同时上传多个文件;
  * 类似AJAX的无刷新上传;
  * 可以显示上传进度;
  * 良好的浏览器兼容性;
  * 兼容其他JavaScript库 (例如:jQuery, Prototype等);
  * 支持Flash 8和Flash 9;
  SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。
  在使用SWFUpload之前,请确认你具备一定的JavaScript和DOM知识。在实际开发中,大部分的错误都是由于错误的设置和低劣的Event Handlers处理程序所造成的。
[编辑本段]文档中文翻译
  
[编辑本段]效果演示
  * Classic Form Demo ;
  * Features Demo ;
  * Application Demo ;
  * v1.0.2 Plugin Demo ;
[编辑本段]选择合适的Flash控件
  在发行包(SWFUpload v2)中含有2个版本的Flash控件(swfupload_f8.swf 与wfupload_f9.swf),其中第一个版本拥有最佳的兼容性,但是为此损失了部分功能;而第二个版本提供了一些附加的功能但是损失了兼容性。
[编辑本段]SWFUpload的初始化与配置
  首先,在页面中引用SWFUpload.js ,如
  <script type="text/javascript" src=";
  然后,初始化SWFUpload ,如
  var swfu; 
  window.onload = function () { 
  swfu = new SWFUpload({ 
  upload_url : "",
  flash_url : "", file_size_limit : "20480" 
  });
  };
  以下是一个标准的SWFUpload初始化设置所需的参数,你可以根据需要自己进行删减:
  { 
  upload_url : "", 处理上传请求的服务器端脚本URL
  file_post_name : "Filedata", 是POST过去的$_FILES的数组名
  post_params : { 
  "post_param_name_1" : "post_param_value_1", 
  "post_param_name_2" : "post_param_value_2", 
  "post_param_name_n" : "post_param_value_n" 
  }, 
  file_types : "*.jpg;*.gif", 允许上传的文件类型
  file_types_description: "Web Image Files", 文件类型描述
  file_size_limit : "1024", 上传文件体积上限,单位MB
  file_upload_limit : 10, 限定用户一次性最多上传多少个文件,在上传过程中,该数字会累加,如果设置为“0”,则表示没有限制
  file_queue_limit : 2, 上传队列数量限制,该项通常不需设置,会根据file_upload_limit自动赋值
  flash_url : "", Flash控件的URL
  flash_width : "1px", 
  flash_height : "1px", 
  flash_color : "#FFFFFF", 
  debug : false, 是否显示调试信息
  swfupload_loaded_handler : swfupload_loaded_function, 当Flash控件成功加载后触发的事件处理函数
  file_dialog_start_handler : file_dialog_start_function, 当文件选取对话框弹出前出发的事件处理函数
  file_queued_handler : file_queued_function, 
  file_queue_error_handler : file_queue_error_function, 
  file_dialog_complete_handler : file_dialog_complete_function, 当文件选取对话框关闭后触发的事件处理函数
  upload_start_handler : upload_start_function, 开始上传文件前触发的事件处理函数
  upload_progress_handler : upload_progress_function, 
  upload_error_handler : upload_error_function, 
  upload_success_handler : upload_success_function, 文件上传成功后触发的事件处理函数
  upload_complete_handler : upload_complete_function, 
  debug_handler : debug_function, 
  custom_settings : { 自定义设置
  custom_setting_1 : "custom_setting_value_1", 
  custom_setting_2 : "custom_setting_value_2", 
  custom_setting_n : "custom_setting_value_n", 
  } 
  }
[编辑本段]SWFUpload中的File Object
  在SWFUpload的使用过程中,无论在客户端还是服务器端都要和File Object打交道,在一个File Object中包含了以下内容:
  { 
  id : string, // SWFUpload file id, used for starting or cancelling and upload 
  index : number, // The index of this file for use in getFile(i) 
  name : string, // The file name. The path is not included. 
  size : number, // The file size in bytes 
  type : string, // The file type as reported by the client operating system 
  creationdate : Date, // The date the file was created 
  modificationdate : Date, // The date the file was last modified 
  filestatus : number, // The file's current status. Use SWFUpload.FILE_STATUS to interpret the value. 
  }
[编辑本段]SWFUpload中的方法
  + setPostParams (param_object)
  - 描述
  动态修改SWFUpload初始化设置中的post_params属性,其中所有的值都将被覆盖。
  - 参数
  param_object:一个simple JavaScript object,所有的name/value都必须是字符串,例如(this.setPostParams({ "Mari": name });)。
  - 返回
  void
[编辑本段]SWFUpload中的事件
  SWFUpload在运行过程中提供了多种事件,这些事件可以让开发者借助句柄来改变页面UI、改变行为,或者报告错误。所有这些事件都可以在一个SWFUpload实体中被调用,这意味着在这些事件对应的函数中,你可以用 this 关键字来代替引用SWFUpload实体。
  + fileDialogComplete (number of files selected)
  - 触发条件
  1. 用户选择好了要上传文件,并关闭对话框;
  2. 用户什么也没选,并取消对话框;
  如果你希望在用户选择完文件后自动开始上传操作,那么可以将 this.startUpload() 操作放在这里。
  - 传入参数
  number of files selected:将返回用户所选取的文件个数。
  + uploadStart (file object) 
  - 触发条件
  该事件在文件上传之前触发,它用于完成一些准备工作,比如传递参数;负责响应该事件的句柄函数可以有2个返回值(true 或 false)当返回值为false时,整个上传将被取消;当返回值为true时上传过程继续进行。而如果返回值为false,则通常是由一个uploadError事件所导致的。
  注:官方帮助文档的原文中对该事件的描述中有这样一句:“If you return 'true' or do not return any value then the upload proceeds.”,从中可以看到既定的设计是当不返回任何值的时候应该等同于返回true,但是笔者在开发中发现必须明确返回值,否则上传进程将停止响应,不知是否是一个bug呢?
  - 传入参数
  file object:文件对象
  + uploadComplete (file object)
  - 触发条件
  在完成一个上传周期后(在uploadError 或 uploadSuccess之后),此时一个上传操作已经结束,另一个上传操作可以开始了。
  - 传入参数
  file object:文件对象
  + uploadProgress (file object, bytes complete, total bytes)
  - 触发条件
  该事件在整个文件的上传过程中定期性的被Flash控件自动触发,用以帮助开发者实时更新页面UI来制作上传进度条。
  注意:该事件在Linux版本的Flash Player中存在问题,目前还无法解决。
  - 传入参数
  file object:文件对象
  bytes complete:已经上传完毕的文件字节数
  total bytes:文件总体积的字节数
[编辑本段]常见错误
  ■ 所上传的文件体积并未超出SWFUpload所设置的数值,但为何无法成功上传?
  □ 通常这是由于服务器端的限制所造成的,以Apache+PHP为例,请修改php.ini中的post_max_size与upload_max_filesize两项设置。
  ■ 在带有Session验证的网站后台中SWFUpload无法正常工作?
  □ 这是因为SWFUpload在上传时相当于重新开辟了一个新的Session进程,因此无法与原有程序的Session保持一致,这就需要在上传时传递原有程序的SessionID,根据它来“找回”其应有的Session。

网上的例子介绍的文档真的很多。下面简单介绍一下

一、首先将SWFUpload所有文件加入项目中,如图

详细说明文档:

SWFUpload的文件上传流程是这样的:

图片 1

1、引入相应的js文件
2、实例化SWFUpload对象,传入一个配置参数对象进行各方面的配置。
3、点击SWFUpload提供的Flash按钮,弹出文件选取窗口选择要上传的文件;
4、文件选取完成后符合规定的文件会被添加到上传的队列里;
5、调用startUpload方法让队列里文件开始上传;
6、文件上传过程中会触发相应的事件,开发者利用这些事件来更新ui、处理错误、发出提示等等;

二、将swfupload和handlers两个文件引入页面中三、将以下代码引用页面中

SWFUpload v2 说明文档
特别提醒
由于Flash Player 10的升级,SWFUpload V2.2.0版本前的程序会出现不兼容问题。详细见Flash Player 10升级导致SWFUpload程序异常,SWFUpload V2.2.0的文档已更新,该V2.1.0帮助文档不再维护!。 

SWFUpload包括三部分的内容:SWFUpload.js、swfupload.swf、初始化配置参数及各种事件处理函数。所以首先在页面引入SWFUpload.js

 <script type="text/javascript">
        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                // Backend Settings
                upload_url: "/ashx/CutPhoto.ashx",
                post_params: {
                    "ASPSESSID": "<%=Session.SessionID %>"
                },

TOC
SWFUpload 
SWFUpload 2 
概述 
入门 
SWFUpload JavaScript 对象 
构造器 
全局变量和常量 
instances 
movieCount 
QUEUE_ERROR 
UPLOAD_ERROR 
FILE_STATUS 
Default Event Handlers 
属性 
customSettings 
movieName 
方法 
addSetting (不推荐使用) 
getSetting (不推荐使用) 
retrieveSetting (v2.1.0中已删除) 
destroy (v2.1.0中新增) 
displayDebugInfo 
selectFile 
selectFiles 
startUpload 
cancelUpload 
stopUpload 
getStats 
setStats 
getFile 
addPostParam 
removePostParam 
addFileParam 
removeFileParam 
setUploadURL 
setPostParams 
setFileTypes 
setFileSizeLimit 
setFileUploadLimit 
setFileQueueLimit 
setFilePostName 
setUseQueryString 
setDebugEnabled 
事件 
flashReady 
swfUploadLoaded 
fileDialogStart 
fileQueued 
fileQueueError 
fileDialogComplete 
uploadStart 
uploadProgress 
uploadError 
uploadSuccess 
uploadComplete 
debug 
SWFUpload 功能对象 
Settings Object 
Settings Description 
File Object 
Stats Object 
SWFUpload 插件(未译) 
存在的问题(未译) 
SWFUpload
SWFUpload最初是由Vinterwebb.se开发的一个客户端的上传工具. 它结合了FLASH和JavaScript的功能,以提供一种超越了传统的浏览器中<input type="file" />标签提供的文件上传功能。 

Java代码  

                // File Upload Settings
                file_size_limit: "2 MB",
                file_types: "*.jpg;*.gif",
                file_types_description: "JPG Images",
                file_upload_limit: 0,    // Zero means unlimited

SWFUpload提供的主要功能:

  1. <script src='SWFUpload.js'></script>  

                // 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.
                swfupload_preload_handler: preLoad,
                swfupload_load_failed_handler: loadFailed,
                file_queue_error_handler: fileQueueError,
                file_dialog_complete_handler: fileDialogComplete,
                upload_progress_handler: uploadProgress,
                upload_error_handler: uploadError,
                upload_success_handler: Show,//这里修改了方法的定义。
                upload_complete_handler: uploadComplete,

在文件选择对话框中能够进行文件多选 
页面无刷新的上传 
提供上传进度的事件回调,实时显示上传进度 
良好的浏览器兼容性 
采用了命名空间以兼容其它JS的库 (例如 jQuery, Prototype, 等等) 
对FLASH8和FLASH9播放器的支持 

然后在页面中实例化一个SWFUpload对象:

                // Button settings
                button_image_url: "/SWFUploadXPButtonNoText_160x22.png",
                button_placeholder_id: "spanButtonPlaceholder",
                button_width: 160,
                button_height: 22,
                button_text: '<span class="button">选择上传图片 <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,

SWFUpload背后的设计思想和其它基于Flash的上传工具是不同的。它将浏览器的中UI交给开发人员来控制。开发人员能够利用XHTML,CSS,Javascript来定制符合他们网站风格的UI上传元素。然后使用它提供的一组简单的JS事件来更新上传状态,开发人员能够利用这些事件来及时更新页面中的上传进度UI。 

 

                // Flash Settings
                flash_url: "/SWFUpload/swfupload.swf", // Relative to this file
                flash9_url: "/SWFUpload/swfupload_FP9.swf", // Relative to this file

SWFUpload v2
SWFUpload v2包含了新的高级功能,改善了稳定性,解决了FlashPlayer中的一些bug,并且提供一套有用的插件。新的功能包括: 

Java代码  

                custom_settings: {
                    upload_target: "divFileProgressContainer"
                },

在文件上传的同时能够发送额外的POST数据(只针对Flash 9 版本) 
针对每一个文件上传发送POST/GET数据 
更直观的事件回调 
动态修改实例设置 
接收服务端返回的数据 (只针对Flash 9 版本) 
非取消形式的停止文件上传 
自定义上传的顺序 
支持单文件、多文件的文件的选择 
文件入队数量,文件上传数量和文件大小的限制 
更合理地处理0字节的文件 
针对每个文件在上传前都提供一个最后确认的时间回调 
解决了v1.0.2版本中未描述到的关于Flash的bug 
解决的v1.0.2中的bug: 
在IE中,刷新的时候FLASH无法加载(详细可见我之前的debug过程) 
在FireFox中,如果窗口的滚动条没有回滚到顶部,那么Flash无法加载 
Race-conditions when files are cached 
兼容ASP.Net Forms 

  1. var swfu;  
  2. window.onload = function () {  
  3. var settings_object = {//定义参数配置对象  
  4. upload_url : "",  
  5. flash_url : "",  
  6. file_post_name : "Filedata",  
  7. post_params : {  
  8. "post_param_name_1" : "post_param_value_1",  
  9. "post_param_name_2" : "post_param_value_2",  
  10. "post_param_name_n" : "post_param_value_n"  
  11. },  
  12. use_query_string : false,  
  13. requeue_on_error : false,  
  14. http_success : [201, 202],  
  15. assume_success_timeout : 0,  
  16. file_types : "*.jpg;*.gif",  
  17. file_types_description: "Web Image Files",  
  18. file_size_limit : "1024",  
  19. file_upload_limit : 10,  
  20. file_queue_limit : 2,  
  21. debug : false,  
  22. prevent_swf_caching : false,  
  23. preserve_relative_urls : false,  
  24. button_placeholder_id : "element_id",  
  25. button_image_url : "",  
  26. button_width : 61,  
  27. button_height : 22,  
  28. button_text : "<b>Click</b> <span class="redText">here</span>",  
  29. button_text_style : ".redText { color: #FF0000; }",  
  30. button_text_left_padding : 3,  
  31. button_text_top_padding : 2,  
  32. button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,  
  33. button_disabled : false,  
  34. button_cursor : SWFUpload.CURSOR.HAND,  
  35. button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,  
  36. swfupload_loaded_handler : swfupload_loaded_function,  
  37. file_dialog_start_handler : file_dialog_start_function,  
  38. file_queued_handler : file_queued_function,  
  39. file_queue_error_handler : file_queue_error_function,  
  40. file_dialog_complete_handler : file_dialog_complete_function,  
  41. upload_start_handler : upload_start_function,  
  42. upload_progress_handler : upload_progress_function,  
  43. upload_error_handler : upload_error_function,  
  44. upload_success_handler : upload_success_function,  
  45. upload_complete_handler : upload_complete_function,  
  46. debug_handler : debug_function,  
  47. };  
  48. swfu = new SWFUpload(settings_object);//实例化一个SWFUpload,传入参数配置对象  
  49. };  
  50. /*定义各种事件监听函数*/  
  51. function swfupload_loaded_function(){}  
  52. function file_dialog_start_function(){}  
  53. //...等等  

                // Debug Settings
                debug: false
            });
        }
        //上传成功以后执行该方法
        function Show(file, serverData) {
            var s = serverData.split(':');//接收从服务端返回的数据,按照分号分隔
            if (s[0] == "ok") {
                $("#imgSrc").attr("src", s[1]);
            }
        }
    </script>

SWFUpload v2 延续了SWFUpload的设计目标,将UI分离以交给开发人员控制和后续扩展 

我们看到要实现一个SWFUpload上传功能很简单,就是实例化一个SWFUpload对象。但繁琐的地方就在于实例化实要用到 的参数配置对象,以及各种事件的发生时机以和提供的参数。所以重点来了。下面几个表格对开发中要用到的东西列举了出来,虽然已经蛮多了,但并不是 SWFUpload的全部,我列出来的只是常用的。要查看完整的文档,请到SWFUpload官网上查询。

四、创建一般处理程序(代码如下)

概述
传统的HTML上传
标准的HTML上传表单为用户提供一个文本框和按钮来选择文件,选中的文件是随着form表单提交的。整个文件上传完成之后,下一个页面才会显示,并且不能对选择的文件做预设的文件检验,例如文件大小限制,文件类型限制。当文件上传时,用户获得的可用的反馈信息很少。 

(一)、配置参数对象中的常用属性及说明   

    if (context.Request["action"].ToString() == "up")
            {
                HttpPostedFile file = context.Request.Files["Filedata"];  //获取上传的文件数据
                string fileName = Path.GetFileName(file.FileName);//获取上传文件的名称
                string fileExt = Path.GetExtension(fileName); //得到文件的扩展名
                if (fileExt == ".jpg")
                {
                    //将上传的图片放到不同的文件夹下(根据日期)
                    string dir = "/UploadImage/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/";
                    Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(dir))); //创建文件夹

传统的HTML上传模式十分简单,线性的,几乎所有浏览器都支持它。 

属性

类型

默认值

描述

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事件侦听函数

                    //文件生命名字
                    string furllDir = dir + Common.WebCommon.GetStreamMD5(file.InputStream) + fileExt;  //构建完整的文件路径
                    using (Image img = Image.FromStream(file.InputStream))
                    { //根据上传图片创建一个Image,获取图片的高度与宽度
                        file.SaveAs(context.Server.MapPath(furllDir));  //把图片保存起来
                        context.Response.Write("ok:" + furllDir + ":" + img.Width + ":" + img.Height);//将图片路径与图片的高度与宽度返回浏览器
                    }
                }
            }
            else if (context.Request["action"].ToString() == "cut") {
              //接收参数
                int x = Convert.ToInt32(context.Request.Form["x"]);
                int y = Convert.ToInt32(context.Request.Form["y"]);
                int width = Convert.ToInt32(context.Request.Form["width"]);
                int height = Convert.ToInt32(context.Request.Form["height"]);
                string imgSrc=context.Request.Form["imgSrc"];
                //创建画布
                using (Bitmap map=new Bitmap(width,height))  //将红色div确定范围到画布上
                {
                   //画笔
                    using (Graphics g=Graphics.FromImage(map))
                    {
                        //用画笔将图片画到画布上
                        using(Image img=Image.FromFile(context.Server.MapPath(imgSrc))){
                            //1.指定的是对哪张图片进行操作
                            //2.指定画多么大
                            //3.画img的那一部分
                             g.DrawImage(img,new Rectangle(0,0,width,height),new Rectangle(x,y,width,height),GraphicsUnit.Pixel);
                             string newfileName = Guid.NewGuid().ToString().Substring(0,8);
                             map.Save(context.Server.MapPath("/UploadImage/")+newfileName+".jpg");  //保存截取后的图片
                             context.Response.Write("/UploadImage/"+newfileName+".jpg");
                        }                        
                    }
                }
            }

SWFUpload
SWFUpload使用一个隐藏的Flash影片来控制文件的选择和上传。JavaScript用来激活文件选择对话框。 此文件选择对话框是可以设置允许用户选择一个单独的文件或者是多个文件。 选择的的文件类型也是可以被限制的,因此用户只能选择指定的适当的文件,例如*.jgp;*.gif。 

 

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

(二)、各种事件说明

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

要实现与用户的交互,靠的就是在这些事件上做文章了

入门
SWFUpload并不是拖放式的上传控件,它需要JavaScript和DOM的知识。一些可用的演示展示了它能够完成什么事情以及它是如何完成这些常见的任务。 

 

SWFUpload由4部分组成:

fileDialogStart ( )

在文件选取窗口将要弹出时触发

fileQueued ( file object )

当一个文件被添加到上传队列时会触发此事件,提供的唯一参数为包含该文件信息的file object对象

fileQueueError ( file object, error code, message )

当文件添加到上传队列失败时触发此事件,失败的原因可能是文件大小超过了你允许的数值、文件是空的或者文件队列已经满员了等。
该事件提供了三个参数。第一个参数是当前出现问题的文件对象,第二个参数是具体的错误代码,可以参照SWFUpload.QUEUE_ERROR中定义的常量

fileDialogComplete ( number of files selected, number of files queued, total number of files in the queued )

当文件选取完毕且选取的文件经过处理后(指添加到上传队列),会立即触发该事件。可以在该事件中调用this.startUpload()方法来实现文件的自动上传
参数number of files selected指本次在文件选取框里选取的文件数量
参数number of files queued指本次被添加到上传队列的文件数量
参数total number of files in the queued指当前上传队列里共有多少个文件(包括了本次添加进去的文件)

uploadStart ( file object )

当文件即将上传时会触发该事件,该事件给了你在文件上传前的最后一次机会来验证文件信息、增加要随之上传的附加信息或做其他工作。可以通过返回false来取消本次文件的上传
参数file object为当前要上传的文件的信息对象

uploadProgress ( file object, bytes complete, total bytes )

该事件会在文件的上传过程中反复触发,可以利用该事件来实现上传进度条
参数file object为文件信息对象
参数bytes complete为当前已上传的字节数
参数total bytes为文件总的字节数

uploadError ( file object, error code, message )

文件上传被中断或是文件没有成功上传时会触发该事件。停止、取消文件上传或是在uploadStart事件中返回false都会引发这个事件,但是如果某个文件被取消了但仍然还在队列中则不会触发该事件
参数file object为文件信息对象
参数error code为错误代码,具体的可参照SWFUpload.UPLOAD_ERROR中定义的常量

uploadSuccess ( file object, server data, received response )

当一个文件上传成功后会触发该事件
参数file object为文件信息对象
参数server data为服务器端输出的数据

uploadComplete( file object )

当一次文件上传的流程完成时(不管是成功的还是不成功的)会触发该事件,该事件表明本次上传已经完成,上传队列里的下一个文件可以开始上传了。该事件发生后队列中下一个文件的上传将会开始

初始化和设置 
JavaScript 库: SWFUpload.js 
Flash控制元素: SWFUpload_f8.swf 或者 SWFupload_f9.swf 
事件处理 
使用SWFUpload遇到的多数问题是由不正确地设置或者定义了糟糕的处理事件引起的。

 

初始化和设置
SWFpload必须在页面中初始化,一般可以在window.onload事件中完成此操作。它的构造函数需要一个Object类型的设置对象。 这个设置对象一般是一个直接定义的Object类型变量,直接传递给SWFUpload的构造函数。

(三)、swfupload实例的方法

初始化的SWFUpload对象的引用需要保留下来,因为当显示文件选择对话框和启动文件上传的时候需要这个实例的引用。 

 

例如:用直接定义的Object类型变量设置初始化SWFUpload对象

方法中大多数是动态改变参数配置对象的方法

var swfu;

 

window.onload = function () {
swfu = new SWFUpload({
upload_url : "",
flash_url : "",
file_size_limit : "20480"
});
}; 
例如:用存储在变量中的设置对象初始化SWFUpload对象

destroy ( )

当不需要再使用SWFUpload了的时候,可以使用该方法来销毁它的实例和dom元素

startUpload( file_id )

开始上传队列中指定的文件
参数file_id代表要上传的文件的id,如果未填写这个参数,则会上传队列中第一个文件

cancelUpload ( file_id, trigger_error_event )

取消文件的上传
参数file_id为要取消的文件的id,如果该参数为undefined或者未填写,则会取消队列里的第一个文件
参数trigger_error_event接受一个布尔值,当为false时取消文件不会触发uploadError事件,默认为true

stopUpload ( )

终止当前正在上传的文件,会触发uploadError事件。如果当前没有文件在上传,则该方法什么都不会做

getStats ( )

获取队列的stats object

setStats ( stats_object )

修改队列的stats_object,传入修改过的stats_object作为参数

getFile ( file_id|index )

根据文件id或文件索引来获取一个File Object,当使用文件id时只能获得队列里的文件,当使用文件索引时所有文件(包括队列内和队列外)都可获得

addPostParam ( name, value)

往配置对象中post_params指定的附加信息对象中增加键/值对

removePostParam ( name)

移除置配置对象中的post_params包含的某一个键/值对,参数name为要移除的值的键名

addFileParam ( file_id, name, value)

为某个特定文件增加随之一起上传的附加信息。注意,只有在该指定的文件上传时,附加的信息才会一起上传。而配置对象中post_param设置的附加信息在任一文件上传时都会与之一起发送。
参数file_id为要指定的文件id,参数name和value分别为附加信息的名称和值

removeFileParam ( file_id, name)

移除通过addFileParam方法增加的附加信息,两个参数相信就不用我多讲了吧

setUploadURL ( url)

动态设置配置对象中upload_url的值

setPostParams ( param_object)

动态设置配置对象中post_params属性的值,新的值会覆盖旧的值。
参数param_object必须为一个对象直接量,且里面的属性和值都只能为字符串

setFileTypes ( types, description)

动态设置配置对象中file_types 和 file_types_description属性的值。两个参数都不能省略

setFileSizeLimit ( file_size_limit)

动态设置配置对象中file_size_limit属性的值

setFileUploadLimit ( file_upload_limit)

动态设置配置对象中file_upload_limit属性的值

setFileQueueLimit ( file_queue_limit)

动态设置配置对象中file_queue_limit属性的值

setFilePostName ( file_post_name)

动态设置配置对象中file_post_name属性的值

setUseQueryString ( use_query_string)

动态设置配置对象中use_query_string属性的值

setButtonImageURL ( url)

动态设置配置对象中button_image_url属性的值

setButtonDimensions ( width, height)

动态设置Flash按钮的宽度和高度,两个参数分别为宽度和高度的值,类型为数字,且不能带单位

setButtonText ( text)

动态设置配置对象中button_text属性的值

setButtonTextStyle ( css_style_text)

动态设置配置对象中button_text_style属性的值

setButtonTextPadding ( left, top )

动态设置Flash按钮的左边内边距和顶部内边距

setButtonDisabled ( isDisabled )

动态对Flash按钮进行禁用和不禁用的操作,参数为一个布尔值

setButtonCursor ( buttonCursor )

动态设置配置对象中button_cursor的值

var swfu;

 

window.onload = function () {
var settings_object = {
upload_url : "",
flash_url : "",
file_size_limit : "20480"
};

(四)、文件信息对象 File Object

swfu = new SWFUpload(settings_object);
}; 
JavaScript 库
该JavaScript库文件(swfupload.js)应该包含在需要上传功能的页面中。它对 Flash Player 8 和 Flash Player 9 SWFUpload 版本都是兼容、可用的。

 

当SWFUpload创建完成并能访问它的一系列功能时,开发人员可以来控制此实例。 

在事件监听函数中,经常要用到文件信息对象来获取文件的信息以供下一步的操作

例如: 添加SWFUpload.js到页面中

 

<script type="text/javascript" src=";
例如: 根据需要的设置来初始化SWFUpload,同时把它的seleteFiles方法绑定到一个按钮的Click事件上。

属性

类型

描述

id

String

SWFUpload定义的文件id,用来控制文件的上传

index

Number

文件的索引,用在getFile(i)方法中

name

String

文件的原始名称,不包括路径

type

String

文件类型

creationdate

Date

文件的创建日期

modificationdate

Date

文件的最后修改日期

filestatus

Number

当前文件的状态,详细的请参照SWFUpload.FILE_STATUS中定义的常量

var swfu = new SWFUpload({
upload_url : "",
flash_url : ""
});

 

document.getElementById("BrowseButton").onclick = function () { swfu.selectFiles(); };
Flash 控制元素
SWFUpload JavaScript库动态加载Flash控制元素(swfupload_f8.swf/swfupload_f9.swf)。该Flash控制元素有两个版本。swfupload_f8.swf支持Flash Player8以及更高版本。它在提供了更好的兼容性同时牺牲了一些功能。swfupload_f9.swf支持Flash Player9.0.28以及更高版本。它在提供了额外的功能同时牺牲了使用Flash Player8的用户。 

(五)、队列状态对象 Stats Object

Flash控制元素的文件地址在初始化的时候就应该在SWFUpload设置对象中定义。

 

Flash控制元素是一个不可见的的Flash影片,它提供了文件浏览、检验和上传功能。它不提供任何用户界面组件,但它会在需要时候通过与Javascript通信来通知浏览器处理更新。 

用来获取当前队列的状况

事件处理
开发人员必须定义一系列JavaScript函数来处理SWFUpload事件回调,当一些不同的重要事件发生的时候,这些函数会被触发。 

 

通过处理SWFUpload的事件,开发人员能够提供关于上传进度、出错信息以及上传完成等的信息反馈。 

属性

类型

描述

in_progress

Number

得到的值为1或0,表明当前队列是否有文件正在上传中

files_queued

Number

目前上传队列中的文件数量

successful_uploads

Number

已成功上传(指触发了uploadSuccess事件)的文件数量

upload_errors

Number

上传失败的文件数量(包括被取消上传的文件)

upload_cancelled

Number

被取消上传的文件数量

queue_errors

Number

触发了fileQueueError事件的文件数量

例如: swfupload的处理事件和初始化

 

// uploadStart处理事件。该函数变量在设置对象中指定给了upload_start_handler属性。
var uploadStartEventHandler = function (file) {
var continue_with_upload = true;

(六)、一些常量

return continue_with_upload;
};

 

//uploadSuccess处理事件。 该函数变量在设置对象中指定给了upload_success_handler属性。
var uploadSuccessEventHandler = function (file, server_data) {

定义的一些常量,便于理解

alert("The file " + file.name + " has been delivered to the server.");
alert("The server responded with " + server_data);
};

 

//创建SWFUpload实例,设置事件回调函数
var swfu = new SWFUpload({
upload_url : "",
flash_url : "",
file_size_limit : "20480",

常量名

描述

SWFUpload.instances

该常量是一个对象,代表一个页面上所有的SWFUpload实例的引用的集合,用SWFUpload实例的movieName属性进行索引

SWFUpload.movieCount

页面上存在的SWFUpload实例的数量

 

 

SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED

用户选取的文件超过了允许的数量

SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT

文件的体积超过了允许的大小

SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE

文件是空的

SWFUpload.QUEUE_ERROR.INVALID_FILETYPE

不允许的文件类型

 

 

SWFUpload.UPLOAD_ERROR.HTTP_ERROR

服务器返回的状态码不是200

SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL

没有设置 upload_url

SWFUpload.UPLOAD_ERROR.IO_ERROR

读取或传输文件时发生错误

SWFUpload.UPLOAD_ERROR.SECURITY_ERROR

上传受到了安全方面的限制

SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED

上传的文件数量超过了允许的最大值

SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED

上传出现错误

SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND

给startUpload()方法传入的文件id不存在

SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED

uploadStart()方法中返回了false

SWFUpload.UPLOAD_ERROR.FILE_CANCELLED

上传被取消了

SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED

上传被终止了

 

 

SWFUpload.FILE_STATUS.QUEUED

文件正在队列中等待上传

SWFUpload.FILE_STATUS.IN_PROGRESS

文件正在上传

SWFUpload.FILE_STATUS.ERROR

文件在添加到队列或是上传的时候出现了错误

SWFUpload.FILE_STATUS.COMPLETE

文件已上传成功

SWFUpload.FILE_STATUS.

文件被取消上传

 

 

SWFUpload.CURSOR.ARROW

鼠标以箭头显示

SWFUpload.CURSOR.HAND

鼠标以手形显示

 

 

SWFUpload.WINDOW_MODE.WINDOW

Flash按钮会显示在页面的所有dom元素上面

SWFUpload.WINDOW_MODE.OPAQUE

允许其他dom元素覆盖住Flash按钮

SWFUpload.WINDOW_MODE.TRANSPARENT

允许Flash按钮透明显示

upload_start_handler : uploadStartEventHandler,
upload_success_handler : uploadSuccessEventHandler
}); 
SWFUpload JavaScript 对象
构造函数
SWFUpload(settings object)

 

返回:一个SWFUpload 实例

 

var swfupload_instance = new SWFUpload(settings_object); 
全局变量和常量
SWFUpload定义了一些全局变量和常量,这对SWFUpload的高级应用程序和处理错误都是很有用的,它们都是只读的。 

官方站点:
DEMO地址:

SWFUpload.instances
SWFUpload.instances是一个存储了页面中所有SWFUpload实例引用的数组。Flash播放器依靠这个数组来调用正确的处理事件。该数组是由movieName属性来索引的关联数组。例如:SWFUpload.instances.SWFUpload_0访问的是第一个实例引用。 

 

注意: SWFUpload.instances不是一个真正的JavaScript数组,实际上它是一个对象(关联数组)。

SWFUplaod学习笔记阅读顺序
一、了解SWFUpload 

SWFUpload.movieCount
SWFUpoad.movieCount是一个全局变量,用于记录页面中的SWFUpload实例个数,同时确保给每一个Flash影片分配一个惟一的movieName。 

二、详细介绍SWFUpload

SWFUpload.QUEUE_ERROR
SWFUpload.QUEUE_ERROR是一个包含了Queue Error错误码的JS对象,一般用它来查看fileQueueError事件的中发送的错误码,以确定fileQueueError的具体类型。 

三、struts2+swfUpload简单例子

SWFUpload.QUEUE_ERROR = {
QUEUE_LIMIT_EXCEEDED : -100,
FILE_EXCEEDS_SIZE_LIMIT : -110,
ZERO_BYTE_FILE : -120,
INVALID_FILETYPE : -130
};
SWFUpload.UPLOAD_ERROR
SWFUpload.UPLOAD_ERROR是一个包含了Upload Error错误码的JS对象,一般用它来查看uploadError事件的中发送的错误码,以确定uploadError的具体类型。 

四、struts2+swfUpload深度整合

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
SWFUpload.FILE_STATUS是一个包含File Status状态码的JS对象。它可以用来检测File对象中的file status属性,以确定文件的状态。

SWFUpload像服务器传递参数

SWFUpload.FILE_STATUS = {
QUEUED : -1,
IN_PROGRESS : -2,
ERROR : -3,
SUCCESS : -4,
CANCELLED : -5
};
默认处理事件
SWFUpload库提供了一系列默认的处理事件。当开发人员没有自定义处理事件时,SWFUpload库将调用这些默认的处理事件。因此当自定义事件时,不要把这些默认的处理事件覆盖了。自定义事件是需要在settings对象中被单独定义的。

SWFUpload接受服务器Action返回的参数

属性
下面这个列表是相关属性的具体描述。使用其它属性或者对只读属性进行了写的操作都会造成SWFUpload出现问题。 

SWFUpload中文乱码问题

customSettings (可读/可写)
customSettings属性是一个空的JavaScript对象,它被用来存储跟SWFUpload实例相关联的数据。它的内容可以使用设置对象中的custom_settings属性来初始化。 

注意:一些插件使用customSettings对象来实现它们的内部控制。当重写整个customSettings对象的时候需要务必小心。 

例如:

// 初始化包含自定义设置的SWFUpload对象
var swfu = new SWFUpload({
custom_settings : {
custom_setting_1 : "custom_setting_value_1",
custom_setting_2 : "custom_setting_value_2",
custom_setting_n : "custom_setting_value_n",
}
});

swfu.customSettings.custom_setting_1 = "custom_setting_value_1"; // 更改一个存在的自定义设置
swfu.customSettings.myNewCustomSetting = "new custom setting value"; // 添加一个新的自定义设置

//用一个全新的对象重写customSettings
swfu.customSettings = {
custom_setting_A : "custom_setting_value_A",
custom_setting_B : "custom_setting_value_B"
};
movieName(只读)
包含了该SWFUpload实例的惟一影片名字。该值被传递给Flash,用来完成Flash和JavaScript的通信。该值被用来索引实例在SWFUpload.instances数组中的位置。 

方法
下面的方法用来操作SWFUpload。其中有些方法可以跟元素(例如,按钮)的点击事件绑定,其它的方法供SWFUpload内部处理事件中调用。 

object addSetting(setting_name, value, default_value)
不赞成使用 V2.1.0源码中注释:addSetting和getSetting已经不再被使用了,只是考虑到兼容V2版本,才继续保留在库中。

object getSetting(setting_name)
不赞成使用 V2.1.0源码中注释:addSetting和getSetting已经不再被使用了,只是考虑到兼容V2版本,才继续保留在库中。

object retrieveSetting(setting_value, default_value)
v2.1.0中已被删除

bool destroy()
v2.1.0中新增

用于将一个SWFUpload实例从页面中销毁。不但删除DOM中的Flash元素,同时还删除SWFUpload实例的相关引用。成功返回true,失败返回false。

这个方法还没有针对插件做兼容测试,可能会有不兼容问题。(尤其是SWFObject插件)

提醒SWFUpload在v2.1.0中改写了Flash插入的代码,V2版中使用SWFObject插入Flash会造成IE的一个刷新BUG。 

void displayDebugInfo()
调用debug方法,在Debug输出框中显示SWFUpload实例的设置信息,如果设置中的debug属性是true,那么默认是在实例化完成以后自动调用此方法。

void selectFile()
弹出flash的文件选择对话框,只能选择单个文件。

void selectFiles()
弹出flash的文件选择对话框,可一次性选择多个文件。

void startUpload(file_id)
指定file_id来启动该文件的上传,如果file_id被忽略了,那么默认开始上传第一个文件。

void cancelUpload(file_id)
指定file_id来退出文件的上传,从上传队列中删除该文件。

如果忽略file_id,那么默认文件上传队列中的第一个文件将被退出上传。

如果取消的文件是正在上传,那么会触发uploadError事件。

void stopUpload()
如果当前有文件上传,那么停止上传,并且将文件还原到上传队列中。

停止了正在上传的文件,uploadError事件会被触发。如果此时没有正在上传文件,那么不会发生任何操作,不会触发任何事件。

object getStats()
获取当前状态的统计对象,具体见Stats Object。

void setStats(stats_object)
Stats统计对象是可以被修改的。如果你希望在上传完毕之后修改上传成功或者上传失败的统计数目时,那么可以使用该方法。

提醒:可供修改的属性只有successful_uploads ,upload_errors,upload_cancelled,queue_errors,并且值必须是Number类型。

object getFile(file_id|index)
根据file_id或者index来获取文件队列中的文件对象。file_id是文件对象中的id属性,index是文件对象中的index属性。

传递Number类型的参数会被认定为index,那么返回的是文件队列(所有尝试入队文件,包括因没有通过文件大小、类型检测等而触发fileQueueError,没有成功加入文件上传队列的文件对象)数组中下标为index的文件对象。如果index不在队列数组范围内,那么返回null。

传递非Number类型的参数会被认定为file_id,那么返回的是文件上传队列(通过文件检测,准备好进行上传的文件)数组中id为file_id的文件对象。如果参数为空,或者没有此id的文件对象,那么返回文件等待队列中的第一个文件对象,如果第一个文件对象为空,那么返回null。

void addPostParam(name, value)
给设置中的post_params对象添加值对,当文件上传的时候,这个值对会一同在POST中发送。

如果设置的时候,post_params中以及存在该值,那么实际上会被覆盖。

void removePostParam(name)
从设置中的post_params对象中删除name指定的属性,当文件上传的时候,删除的值对不会继续在POST中发送。

bool addFileParam(file_id, name, value)
为指定file_id的特定文件对象添加POST值对,如果添加的name属性已经存在,那么原值会被覆盖。

如果需要给所有文件对象添加POST值,那么可以使用设置中的post_params属性。

bool removeFileParam(file_id, name)
删除由addFileParam添加的POST值对.

如果POST设置中没有此属性,那么返回false。

void setUploadURL(url)
动态修改设置中的upload_url属性。

void setPostParams(param_object)
动态修改post_params,以前的属性全部被覆盖。param_object必须是一个JavaScript的基本对象,所有属性和值都必须是字符串类型。

void setFileTypes(types, description)
动态修改设置中的file_types 和 file_types_description,两个参数都是必须的。

void setFileSizeLimit(file_size_limit)
动态修改设置中的file_size_limit,此修改针对之后的文件大小过滤有效。file_size_limit参数接收一个单位,有效的单位有B、KB、MB、GB,默认单位是KB。

例如: 2147483648 B, 2097152, 2097152KB, 2048 MB, 2 GB

void setFileUploadLimit(file_upload_limit)
动态修改设置中的file_upload_limit,特殊值0表示无限制。

提醒:这里限制的是一个SWFUpload实例控制上传成功的文件总数。

void setFileQueueLimit(file_queue_limit)
动态修改设置中的file_queue_limit,特殊值0表示无限制。

提醒:这里限制的是文件上传队列中(入队检测通过的文件会添加到上传队列等待上传)允许排队的文件总数。

void setFilePostName(file_post_name)
动态修改设置中的file_post_name,注意在Linux环境下,FlashPlayer是忽略此设置的。

void setUseQueryString(use_query_string)
动态修改设置中的use_query_string,设置为true的时候,SWFUpload以GET形式发送数据,如果为false,那么就以POST发送数据。

void setDebugEnabled(debug_enabled)
启动/禁止 debug输出,debug_enabled参数是一个布尔值。

事件
SWFUpload在操作过程中会触发一系列事件,开发者可以利用这些回调的处理事件来控制UI,控制操作或者报告错误。

所有的事件都是在SWFUpload实例的上下文中调用的,因此在这些回调的事件中使用this能够直接访问到该触发该事件的实例对象。

flashReady()
该事件函数是内部事件,因此不能被重写。当SWFupload实例化,加载的FLASH完成所有初始化操作时触发此事件。

提醒:对应设置中的自定义事件swfupload_loaded_handler

swfUploadLoaded()
V2.1.0版本中已经删除了此事件

fileDialogStart()
此事件在selectFile或者selectFiles调用后,文件选择对话框显示之前触发。只能同时存在一个文件对话框。

提醒:对应设置中的自定义事件file_dialog_start_handler

fileQueued(file object)
当文件选择对话框关闭消失时,如果选择的文件成功加入上传队列,那么针对每个成功加入的文件都会触发一次该事件(N个文件成功加入队列,就触发N次此事件)。

提醒:对应设置中的自定义事件file_queued_handler

fileQueueError(file object, error code, message)
当选择文件对话框关闭消失时,如果选择的文件加入到上传队列中失败,那么针对每个出错的文件都会触发一次该事件(此事件和fileQueued事件是二选一触发,文件添加到队列只有两种可能,成功和失败)。

文件添加队列出错的原因可能有:超过了上传大小限制,文件为零字节,超过文件队列数量限制,设置之外的无效文件类型。

具体的出错原因可由error code参数来获取,error code的类型可以查看SWFUpload.QUEUE_ERROR中的定义。

提醒:对应设置中的自定义事件file_queue_error_handler

注意:如果选择入队的文件数量超出了设置中的数量限制,那么所有文件都不入队,此事件只触发一次。如果没有超出数目限制,那么会对每个文件进行文件类型和大小的检测,对于不通过的文件触发此事件,通过的文件成功入队。 

fileDialogComplete(number of files selected, number of files queued)
当选择文件对话框关闭,并且所有选择文件已经处理完成(加入上传队列成功或者失败)时,此事件被触发,number of files selected是选择的文件数目,number of files queued是此次选择的文件中成功加入队列的文件数目。

提醒:对应设置中的自定义事件file_dialog_complete_handler

注意:如果你希望文件在选择以后自动上传,那么在这个事件中调用this.startUpload() 是一个不错的选择。如果需要更严格的判断,在调用上传之前,可以对入队文件的个数做一个判断,如果大于0,那么可以开始上传。 

uploadStart(file object)
在文件往服务端上传之前触发此事件,可以在这里完成上传前的最后验证以及其他你需要的操作,例如添加、修改、删除post数据等。

在完成最后的操作以后,如果函数返回false,那么这个上传不会被启动,并且触发uploadError事件(code为ERROR_CODE_FILE_VALIDATION_FAILED),如果返回true或者无返回,那么将正式启动上传。

提醒:对应设置中的自定义事件upload_start_handler

uploadProgress(file object, bytes complete, total bytes)
该事件由flash定时触发,提供三个参数分别访问上传文件对象、已上传的字节数,总共的字节数。因此可以在这个事件中来定时更新页面中的UI元素,以达到及时显示上传进度的效果。

注意: 在Linux下,Flash Player只在所有文件上传完毕以后才触发一次该事件,官方指出这是Linux Flash Player的一个bug,目前SWFpload库无法解决(我没有测试过)。

提醒:对应设置中的自定义事件upload_progress_handler

uploadError(file object, error code, message)
无论什么时候,只要上传被终止或者没有成功完成,那么该事件都将被触发。error code参数表示了当前错误的类型,更具体的错误类型可以参见SWFUpload.UPLOAD_ERROR中的定义。Message参数表示的是错误的描述。File参数表示的是上传失败的文件对象。

例如,我们请求一个服务端的一个不存在的文件处理页面,那么error code会是-200,message会是404。停止、退出、uploadStart返回false、HTTP错误、IO错误、文件上传数目超过限制等,都将触发该事件,Upload error will not fire for files that are cancelled but still waiting in the queue。(对于官方的这句话我还存在疑问,文件退出以后怎么还会保留在文件上传队列中保留呢?) 

提醒:对应设置中的自定义事件upload_error_handler

注意:此时文件上传的周期还没有结束,不能在这里开始下一个文件的上传。

uploadSuccess(file object, server data)
当文件上传的处理已经完成(这里的完成只是指向目标处理程序发送了Files信息,只管发,不管是否成功接收),并且服务端返回了200的HTTP状态时,触发此事件。

提醒:对应设置中的自定义事件upload_success_handler

注意: 如果使用的是SWFUpload提供的9.0版本的SWF,那么server data是服务端处理程序返回的数据。 
如果使用的是8.0版本,那么server data不可用,一直为undefined。 
此时文件上传的周期还没有结束,不能在这里开始下一个文件的上传。 
在window平台下,如果使用的是9.0版本,那么服务端的处理程序在处理完文件存储以后,必须返回一个非空值,否则此事件不会被触发,随后的uploadComplete事件也无法执行。 
uploadComplete(file object)
当上传队列中的一个文件完成了一个上传周期,无论是成功(uoloadSuccess触发)还是失败(uploadError触发),此事件都会被触发,这也标志着一个文件的上传完成,可以进行下一个文件的上传了。

如果要进行多文件自动上传,那么在这个时候调用this.startUpload()来启动下一个文件的上传是不错的选择。

提醒:对应设置中的自定义事件upload_complete_handler

注意:当在进行多文件上传的时候,中途用cancelUpload取消了正在上传的文件,或者用stopUpload停止了正在上传的文件,那么在uploadComplete中就要很小心的使用this. startUpload(),因为在上述情况下,uploadError和uploadComplete会顺序执行,因此虽然停止了当前文件的上传,但会立即进行下一个文件的上传,你可能会觉得这很奇怪,但事实上程序并没有错。如果你希望终止整个队列的自动上传,那么你需要做额外的程序处理了。

debug(message)
如果debug setting设置为true,那么页面底部会自动添加一个textArea, SWFUpload库和Flash都会调用此事件来在页面底部的输出框中添加debug信息供调试使用。

提醒:对应设置中的自定义事件debug_handler

SWFUpload功能对象
Settings object
它是一个Object类型的变量,为SWFUpload的实例初始化提供配置。 其中的每一个配置属性都只能出现一次。 很多属性都是可选的,如果可选属性没有被配置,那么会使用SWFUpload库中默认指定的合适的值,具体可查看setting的详细介绍。

例如:(setting可以配置的所有属性)

{
upload_url : "",
file_post_name : "Filedata",
post_params : {
"post_param_name_1" : "post_param_value_1",
"post_param_name_2" : "post_param_value_2",
"post_param_name_n" : "post_param_value_n"
},
use_query_string : false,
requeue_on_error : false,
file_types : "*.jpg;*.gif",
file_types_description: "Web Image Files",
file_size_limit : "1024",
file_upload_limit : 10,
file_queue_limit : 2,
flash_url : "",
flash_width : "1px",
flash_height : "1px",
flash_color : "#FFFFFF",
debug : false,

swfupload_loaded_handler : swfupload_loaded_function,
file_dialog_start_handler : file_dialog_start_function,
file_queued_handler : file_queued_function,
file_queue_error_handler : file_queue_error_function,
file_dialog_complete_handler : file_dialog_complete_function,
upload_start_handler : upload_start_function,
upload_progress_handler : upload_progress_function,
upload_error_handler : upload_error_function,
upload_success_handler : upload_success_function,
upload_complete_handler : upload_complete_function,
debug_handler : debug_function,

custom_settings : {
custom_setting_1 : "custom_setting_value_1",
custom_setting_2 : "custom_setting_value_2",
custom_setting_n : "custom_setting_value_n",
}

Settings 描述
upload_url
默认值:空字符串

upload_url设置接收的是一个绝对的或者相对于SWF文件的完整URL。推荐使用完整的绝对路径,以避免由浏览器和FlashPlayer修改了基准路径设置而造成的请求路径错误。

注意:这里需要考虑FlashPlayer的安全域模型。

file_post_name
默认值:Filedata

(仅在Flash 9版本中可用)该参数设置了POST信息中上传文件的name值(类似传统Form中设置了<input type="file" name="uploadImg"/>的name属性)。

注意:在Linux下面此参数设置无效,接收的name总为Filedata,因此为了保证最大的兼容性,建议此参数使用默认值。

post_params
默认值:空的Object对象

post_params定义的是一个包含值对的object类型数据,每个文件上传的时候,其中的值对都会被一同发送到服务端。 

注意: 设置值对的时候,值只能是字符串或者数字。 
Flash8不支持额外的POST参数,因此post_params会以GET的方式发送。 
use_query_string
默认值:false

(仅在Flash 9版本中可用) 该属性可选值为true和false,设置post_params是否以GET方式发送。如果为false,那么则以POST形式发送。 

requeue_on_error
默认值:false

该属性可选值为true和false。如果设置为true,当文件对象发生uploadError时(除开fileQueue错误和FILE_CANCELLED错误),该文件对象会被重新插入到文件上传队列的前端,而不是被丢弃。如果需要,重新入队的文件可以被再次上传。如果要从上传队列中删除该文件对象,那么必须使用cancelUpload方法。 

跟上传失败关联的所有事件同样会被一一触发,因此将上传失败的文件重新入队可能会和Queue Plugin造成冲突(或者是自动上传整个文件队列的自定义代码)。如果代码中调用了startUpload方法自动进行下一个文件的上传,同时也没有采取任何措施让上传失败的文件退出上传队列,那么这个重新入队的上传失败的文件又会开始上传,然后又会失败,重新入队,重新上传...,进入了无止境的循环。 

该设置是在v2.1.0中引入的。 

file_types
默认值:*.*

设置文件选择对话框的文件类型过滤规则,该属性接收的是以分号分隔的文件类型扩展名,例如“ *.jpg;*.gif”,则只允许用户在文件选择对话框中可见并可选jpg和gif类型的文件。默认接收所有类型的文件。 

提醒:该设置只是针对客户端浏览器的过滤,对服务端的文件处理中的文件类型过滤没有任何限制,如果你需要做严格的文件过滤,那么服务端同样需要程序检测。 

file_types_description
默认值:All Files

设置文件选择对话框中显示给用户的文件描述。 

file_size_limit
默认值:0

设置文件选择对话框的文件大小过滤规则,该属性可接收一个带单位的数值,可用的单位有B,KB,MB,GB。如果忽略了单位,那么默认使用KB。特殊值0表示文件大小无限制。 

提醒:该设置只对客户端的浏览器有效,对服务端的文件处理没有任何限制,如果你需要做严格文件过滤,那么服务端同样需要程序处理。

file_upload_limit
默认值:0

设置SWFUpload实例允许上传的最多文件数量,同时也是设置对象中file_queue_limit属性的上限。一旦用户已经上传成功或者添加文件到队列达到上最大数量,那么就不能继续添加文件了。特殊值0表示允许上传的数量无限制。只有上传成功(上传触发了uploadSuccess事件)的文件才会在上传数量限制中记数。使用setStats方法可以修改成功上传的文件数量。 

注意:该值不能跨页面使用,当页面刷新以后该值也被重置。严格的文件上传数量限制应该由服务端来检测、管理。 

file_queue_limit
默认值:0

设置文件上传队列中等待文件的最大数量限制。当一个文件被成功上传,出错,或者被退出上传时,如果文件队列中文件数量还没有达到上限,那么可以继续添加新的文件入队,以顶替该文件在文件上传队列中的位置。如果允许上传的文件上限(file_upload_limit)或者剩余的允许文件上传数量小于文件队列上限(file_queue_limit),那么该值将采用这个更小的值。 

flash_url
默认值:空字符串

设置绝对或者相对于此上传页面的完整URL,一旦SWFupload实例化以后,此设置不能再被修改。 

提醒:测试发现使用setUploadURL方法是可以修改此设置的。 

flash_width
固定值:1px

(v2.1.0已删除) 设置插入flash影片的HTML元素容器的宽度。如果此设置小于1像素,一些浏览器会出现功能异常。 因此该值在v2.1.0中删除了自定义设置,默认设置为1像素了。 

flash_height
固定值:1px

(v2.1.0已删除) 设置插入flash影片的HTML元素容器的高度。如果此设置小于1像素,一些浏览器会出现功能异常。 因此该值在v2.1.0中删除了自定义设置,默认设置为1像素了。 

flash_color
默认值:#FFFFFF

设置HTML页面中的flash背景色,默认为#FFFFFF 

提醒:对一个1*1像素的flash元素设置背景颜色,在视觉上的改变基本无效。 

debug
默认值:false

该值是布尔类型,设置debug事件是否被触发。 

注意:SWFUpload代码中是将此变量和字符串true做的恒等判断,因此它只认定true为DEBUG模式开启,如果设置为1,虽然JS认定是开启模式,并且在初始化完毕后会有生成Debug Console,但后续操作中FLASH不会输出调试信息。(因为我习惯用1和0代表布尔变量,因此一度疑惑为何Flash的debug信息无法输出。) 

custom_settings
默认值:空的Object对象

该属性接收一个Object类型数据,可用于安全地存储与SWFUpload实例关联的自定义信息,例如属性和方法,而不用担心跟SWFUpload内部的方法和属性冲突以及版本升级的兼容。 

设置完毕以后,可以通过实例的customSettings属性来访问。 

var swfu = new SWFUpload({
custom_settings : {
"My Setting" : "This is my setting",
myothersetting : "This is my other setting",
integer_setting : 100,
a_dom_setting : document.getElementById("some_element_id")
}
});

var my_setting = swfu.customSettings["My Setting"]);
swfu.customSettings["My Setting"] = "This is my new setting";
swfu.customSetting.myothersetting = "another new value";
swfu.customSetting.integer_setting += 25;
swfu.customSetting["a_dom_setting"].style.visibility = "hidden"; 
Event Handlers
默认值:null

剩下的设置定义的是一系列事件处理的回调函数,在SWFUpload的操作过程中相应的事件会被触发。如果你需要在这些回调中进行自定义操作,那么你应该在设置中定义对应的JavaScript函数。 

File Object
File Object包含了一组可用的文件属性,很多处理事件都会传递一个File Object参数来访问该文件的相关属性。

{
id : string, // SWFUpload控制的文件的id,通过指定该id可启动此文件的上传、退出上传等
index : number, // 文件在选定文件队列(包括出错、退出、排队的文件)中的索引,getFile可使用此索引
name : string, // 文件名,不包括文件的路径。
size : number, // 文件字节数
type : string, // 客户端操作系统设置的文件类型
creationdate : Date, // 文件的创建时间
modificationdate : Date, // 文件的最后修改时间
filestatus : number // 文件的当前状态,对应的状态代码可查看SWFUpload.FILE_STATUS


Stats Object
该对象提供了上传队列的状态信息,访问实例的getStats方法可获取此对象。

该对象包括下面属性:

{
in_progress : number // 值为1或0,1表示当前有文件正在上传,0表示当前没有文件正在上传
files_queued : number // 当前上传队列中存在的文件数量
successful_uploads : number // 已经上传成功(uploadSuccess触发)的文件数量
upload_errors : number // 已经上传失败的文件数量 (不包括退出上传的文件)
upload_cancelled : number // 退出上传的文件数量
queue_errors : number // 入队失败(fileQueueError触发)的文件数量

所有这些属性的值都可以使用setStats方法来修改,除了in_progress 和 files_queued。


本文由9159.com发布于编程,转载请注明出处:SWFUpload的主要特点,网上的例子介绍的文档真的

关键词: