《Extjs实战》节选：文件上传
Ext 没提供上传组件？很多人都会有这疑问。
其实 Ext.form.TextField 就是 Ext 的上传组件的，只要将其配置参数 inputType 设置为“ file ”就行了。上传文件除了文件输入框，还有一个重要的设置，就是需要将 form 的 enctype 属性设置为“ multipart/form-data ”。这个也很简单，在定义 FormPanel 的时候加入 BasicForm 的配置参数 fileUpload ，并设置为 true 就行了。
在 Ext 中使用标准上传方式最大的缺点就是文件输入框的宽度很难控制，与界面不是太协调，而且在不同浏览器中的显示是不同的。在 Ext 官方论坛中有很多替代办法，笔者比较喜欢的是 SWFUpload 。
SWFUpload 使用 Flash 作为上传组件，文件选择可以设置为单选，也可以设置多选，而且可以控制选择文件的类型。执行文件选择不依赖于标准文件输入框，可以使用按钮、链接等多种方式执行，从而可以根据需要设置界面。 SWFUpload 的提交不依赖 Form ，其模式类似于 Ajax 提交，可以很容易的实现对上传的控制和显示上传进度。
SWFUpload 的官方地址是： http://www.swfupload.org/ 。
在 SWFUpload 中有两个主要对象： file 和 Stats 。
file 对象主要是保存文件的一些基本信息，其结构如下：
| { id : string, // SWFUpload 的文件编号，作为开始上传、取消上传的句柄 index : number, // 文件在上传队列中的索引 name : string, // 文件名，不包含路径 size : number, // 文件大小，单位为字节 type : string, // 文件类型 creationdate : Date, // 文件创建日期 modificationdate : Date, // 文件最后编辑日期 filestatus : number, // 文件状态 } |
Stats 对象主要提供上传队列中的信息，其结构如下：
| { in_progress : number // 1 表示正在上传文件， 0 表示则不是 files_queued : number // 上传队列中的文件数量 successful_uploads : number // 已成功上传的文件数量 upload_errors : number // 上传失败的文件数量 upload_cancelled : number // 取消上传的文件数量 queue_errors : number // 触发了 fileQueueError 事件的文件数量 } |
表 1 列出了 SWFUpload 的主要配置参数。
| 表1 SWFUpload 的主要配置参数 |
||
| 参数 |
类型 |
描述 |
| upload_url |
字符串 |
文件上传地址 |
| flash_url |
字符串 |
SWFUpload 使用的 flash 文件的绝对地址或相对地址 |
| file_size_limit |
字符串 |
限制上传文件的大小 格式为：值 + 单位 允许的单位有 B 、 KB 、 MB 和 GB 。如果不设置单位，则默认单位为 KB 如果设置为 0 则无限制 |
| file_upload_limit
|
数字 |
允许上传的文件数量，该值表示的是在上传页面没有被销毁前允许上传的文件数量。默认值为 0 ，表示没有限制 |
| file_queue_limit |
数字 |
在一次上传过程中允许上传的文件数量，默认值为 0 ，表示无限制 |
| file_types |
字符串 |
限制上传文件的类型。使用分号分隔各类型 例如：“ *.jpg;*.gif ”表示只允许上传扩展名为 JPG 和 GIF 的文件 |
| file_post_name |
字符串 |
服务器端接收文件的变量名，本属性只在 Flash 9 版本有效 |
| requeue_on_error |
布尔值 |
设置为 true 则当文件上传错误时重新返回队列等待上传，设置为 false 则不再上传 |
| post_params |
对象 |
JSON 格式的与文件一起上传的参数， Flash 8 版本不支持 |
| file_types_description |
字符串 |
在文件选择对话框显示的文本描述 |
| flash_color |
颜色值 |
设置包含 flash 的 HTML 标签的背景颜色，默认值是“ #FFFFFF ” |
| debug |
布尔值 |
设置为 true 则显示调试 |
| file_queued_handler |
函数 |
当选择文件对话框关闭时执行该函数，函数会传入一个 file 对象 |
| upload_start_handler |
函数 |
文件开始上传时执行该函数，函数会传入一个 file 对象 |
| upload_progress_handler |
函数 |
通过该函数显示上传进度，函数传入一个 file 对象与文件已上传的字节数 |
| upload_success_handler |
函数 |
单个文件上传成功时执行该函数，函数传入一个 file 对象与服务器端返回的信息 |
| upload_error_handler |
函数 |
单个文件上传失败或中断时执行该函数，函数传入一个 file 对象、错误代码与错误信息 |
| file_queue_error_handler |
函数 |
文件未能加入队列时执行该函数，函数传入一个 file 对象、错误代码与错误信息 |
表 2 列出了 SWFUpload 的主要方法。
| 表2SWFUpload 的主要方法 |
|
| 方法 |
描述 |
| selectFile |
功能：打开选择文件对话框，但允许选择一个文件 语法： selectFile() 参数： 无 返回值：无 例子： swfu.selectFile() |
| selectFiles |
功能：打开选择文件对话框，允许选择多个文件 语法： selectFiles() 参数： 无 返回值：无 例子： swfu.selectFiles() |
| startUpload |
功能：开始上传文件 语法： startUpload ([file_id]) 参数： file_id ：可选值，要上传的文件编号，如果不设置则上传队列里的第一个文件 返回值：无 例子： swfu.startUpload () |
| cancelUpload |
功能：取消上传某个文件 语法： cancelUpload ([file_id]) 参数： file_id ：可选值，要取消上传的文件编号，如果不设置则上传队列里的第一个文件取消上传 返回值：无 例子： swfu.cancelUpload () |
| stopUpload |
功能：中止上传 语法： stopUpload () 参数： 无 返回值：无 例子： swfu.stopUpload () |
| getStats |
功能：返回当前上传状态 语法： getStats () 参数： 无 返回值： stats 对象 例子： vat stats=swfu.getStats () |
| setPostParams |
功能：设置提交的附加参数 语法： setPostParams(param_object) 参数： param_object ：一个 JSON 对象 返回值：无 例子： swfu. setPostParams({id:1,title:’ 标题 ’}) 该例子附加了两个提交参数，一个为 id ，值为 1 ，一个为 title ，值为标题 |
要使用 SWFUpload ，需要在页面加载 swfupload.js 文件并设置好参数，尤其要注意 Flash 文件的路径。具体使用方法请看下面例子：
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html debug='true'> <head> <title> 上传文件 </title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" /> <script type="text/javascript" src="../lib/ext/ext-base.js"></script> <script type="text/javascript" src="../lib/ext/ext-all.js"></script> <script type="text/javascript" src="../lib/ext/radiogroup.js"></script> <script type="text/javascript" src="../lib/ext/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="swfupload.js"></script> </head> <body> <h1 style="margin:20px 0px 0px 20px;"> 第 4 章 上传文件 </h1> <br /> <div style="padding-left:20px;"> <p> <div id="form1"></div><br> <div > 执行操作： </div> <textarea id='op' rows="10" style="width:800px;"></textarea> </p> <br /> </div> <script> var app={};
var swfu;
Ext.onReady(function(){
Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'under';
swfu=new SWFUpload({ upload_url : "upload.ashx", flash_url : "swfupload_f9.swf" , file_size_limit : "10240", file_types : "*.jpg;*.gif", file_post_name : "Filedata", requeue_on_error : false, post_params : {}, file_types_description:' 图片 ', flash_color : "#FFFFFF", file_queued_handler : function(file){ var filetype=(file.type.substr(1)).toUpperCase(); if(filetype=='JPG' | filetype=='GIF'){ swfu.startUpload(); }else{ Ext.Msg.alert(' 错误 ',' 只能上传 JPG 或 GIF 格式文件 ') } }, upload_start_handler:function(file){Ext.Msg.progress(' 上传文件 ',' 正在上传文件： '+file.name,'0%');return true;}, upload_progress_handler:function(file,bytesloaded){ var percent = Math.ceil((bytesloaded / file.size) * 100); &nb |