写这篇文章一方面是为了让大家能够快速的上手swfupload从而快速的开发,一方面怕博主以后忘了能够回来在翻翻自己的文章(Extjs4.2低于一下版本未测试,浏览器兼容未测试)。
下面直接进入正题,在使用swfupload之前我们先来介绍下swfupload的特点,从而明白为什么要使用swfupload。
swfupload特点:
1.swfupload是使用flash进行文件上传,实现了无刷新页面。
2.swfupload允许一次上传多个文件,这些文件都会被添加到队列中,队列大小可自由限制,当调用startUpload()进行上传时,队列中文件会被逐个的上传,每个文件的进度在达到100%的时候会请求一次服务端,进行文件的上传,上传结束后,都会调用一次回调函数。
3.文件在上传还未请求服务端之前,可以在客户端进行文件上传限制,比如文件类型,大小等。
使用swfupload,必须导入swfupload.js和swfupload.swf两个文件
首先写一套上传组件uploadPanel.js文件,代码如下:
下面直接进入正题,在使用swfupload之前我们先来介绍下swfupload的特点,从而明白为什么要使用swfupload。
swfupload特点:
1.swfupload是使用flash进行文件上传,实现了无刷新页面。
2.swfupload允许一次上传多个文件,这些文件都会被添加到队列中,队列大小可自由限制,当调用startUpload()进行上传时,队列中文件会被逐个的上传,每个文件的进度在达到100%的时候会请求一次服务端,进行文件的上传,上传结束后,都会调用一次回调函数。
3.文件在上传还未请求服务端之前,可以在客户端进行文件上传限制,比如文件类型,大小等。
使用swfupload,必须导入swfupload.js和swfupload.swf两个文件
首先写一套上传组件uploadPanel.js文件,代码如下:
Ext.define('htdocs.js.myUx.upload.UploadPanel',{
extend:"Ext.panel.Panel",
alias:"widget.multiFileUploadPanel",
layout : 'fit',
config:{
//处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当前代码所在的文档地址
upload_url:"",
//swfupload.swf文件的绝对或相对地址,相对地址是指相对于当前的页面地址。实例化swfupload后,就不能再改变该属性的值了
flash_url:"",
file_post_name:"",
//上传文件最大体积100MB 有效的单位有B、KB、MB、GB,默认单位是KB
file_size_limit:'1000MB',
//该属性指定了允许上传的文件类型,当有多个类型时使用分号隔开,比如:*.jpg;*.png ,允许所有类型时请使用 *.*
file_types:'*.*',
//设置文件选择对话框中显示给用户的文件描述。默认值All Files
file_types_description:'All Files',
//这里限制的是一个SWFUpload实例控制上传成功的文件总数。最大队列数,把该属性设为0时表示不限制文件的上传数量。
file_upload_limit:3,
//post_params定义了一些键/值对,允许在上传每个文件时候捎带地post给服务器
post_params:{}
},
initComponent:function(){
var me = this;
me.setting={
upload_url: me.upload_url,
flash_url: me.flash_url,
file_post_name: me.file_post_name,
file_size_limit: me.file_size_limit,
file_types: me.file_types,
file_types_description: me.file_types_description,
file_upload_limit: me.file_upload_limit,
file_queue_limit: me.file_queue_limit,
post_params: me.post_params,
//设置为false时post_params定义的参数为使用post方式进行上传,true为get方式上传
use_query_string: true,
//false为不开启debug模式,在flash中不会输出调试信息
debug: true,
//设置鼠标悬停在Flash Button时的光标样式,默认值是SWFUpload.CURSOR.ARROW(箭头光标),SWFUpload.CURSOR.HAND(手势)
button_cursor: SWFUpload.CURSOR.HAND,
/*设置浏览器具体以哪种模式显示该SWF影片,默认值SWFUpload.WINDOW_MODE.WINDOW,可用值在SWFUpload.WINDOW_MODE常量里面查找
* WINDOW 是默认模式. flash影片绘制在页面的最上层.
* OPAQUE 允许页面其他元素遮盖这个按钮影片。
* TRANSPARENT 透明。按钮的背景呈透明状,允许html元素在它下面显示
*/
button_window_mode:SWFUpload.WINDOW_MODE.TRANSPARENT,
custom_settings : {//自定义参数
scope_handler : me
},
//浏览器不支持某重要特性参数
swfupload_preload_handler:me.swfuploadPreloadHandler,
//通常是因为没有安装Flash Player或者它的版本低于 9.0.28
swfupload_load_failed_handler:me.swfuploadLoadFailedHandler,
//当文件选择对话框关闭消失时,如果选择的文件成功加入上传队列,那么针对每个成功加入的文件都会触发一次该事件
file_queued_handler:me.fileQueuedHandler,
//当选择文件对话框关闭时,如果选择的文件加入到上传队列中失败,那么针对每个出错的文件都会触发一次该事件
file_queue_error_handler:me.fileQueryErrorHandler,
//开始上传时触发事件
upload_start_handler:me.uploadStartHandler,
//服务端返回信息(不管是否成功或失败)都会触发该事件
upload_success_handler:me.uploadSuccessHandler,
//请求错误触发该事件
upload_error_handler:me.uploadErrorHandler,
//上传进度事件
upload_progress_handler:me.uploadProgressHandler
};
me.items=[Ext.create('Ext.grid.Panel',{
border : false,
autoScroll:true,
store: Ext.create('Ext.data.Store',{
storeId:"fileStoreId",
autoLoad : false,
fields : ['id','fileName','file