博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
swfupload详解
阅读量:5101 次
发布时间:2019-06-13

本文共 8265 字,大约阅读时间需要 27 分钟。

前提:

Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame,较Ajax要麻烦许多,而且其提交方式依然在底层是使用的表单file,这里我们不详谈。而且如果是提交较小的文件,我们能接受,如果提交的文件较大,我们便要忍受很长的等待时间,而浏览器却没有任何提示,我们也没有办法知道文件上传的进度

swfupload利用Flash自身的文件提交技术而无需刷新页面,而且能够获取文件上传进度,可以提交多个文件,而且还能控制上传文件的大小,类型等信息。

一:下载SWFUpload

 

下载地址:https://code.google.com/p/swfupload/downloads/list

 

下载完后解压到某个目录,我这里放在/swfu目录下,该目录可自行修改。需要保留目录下的swfupload.jsFlash/swfupload.swf两个文件和plugins目录,其它的都可以删掉。

 

  • swfupload.js: swfupload的js脚本,封装swfupload.swf的各种接口供js调用,简化操作。
  • swfupload.swf: swfupload的核心所在,上传多个文件,提供上传进度,限制文件容量尺寸等提优于于上传表单功能的工具,实质是一个flash
  • plugins目录: swfupload的各种插件。其中swfupload.cookies.js用于解决ie中flash请求服务器时,请求头中不带cookie的bug。swfupload.queue.js插件提供更强大的上传队列功能,比如说取消队列等等。 swfupload.speed.js插件提供上传速度,上传剩余时间,以上传事件等信息。 swfupload.swfobject.js插件集成了库,用于将swfupload组件嵌入到dom中,而且新增了一个swfupload组件正在载入的事件。

 

二:配置(所有的配置都源于swfupload.js文件中的SWFUpload.prototype.initSettings 这个函数)

// Private: initSettings ensures that all the// settings are set, getting a default value if one was not assigned.SWFUpload.prototype.initSettings = function (userSettings) {    this.ensureDefault = function (settingName, defaultValue) {        var setting = userSettings[settingName];        if (setting != undefined) {            this.settings[settingName] = setting;        } else {            this.settings[settingName] = defaultValue;        }    };        // Upload backend settings    this.ensureDefault("upload_url", "");   //upload_url设置接收的是一个绝对的或者相对于SWF文件的完整URL。推荐使用完整的绝对路径,以避免由浏览器和FlashPlayer修改了基准路径设置而造成的请求路径错误,如http://www.hongxiang100.com/swfupload/upload.php    this.ensureDefault("preserve_relative_urls", false);  //    this.ensureDefault("file_post_name", "Filedata");    //类似于表单上传控件的name属性,默认值为Fileda,文件对象的名称,默认Filedata,后台接收就靠它识别(如$_FILES["Filedata"]获取上传)。这里不建议修改,因为在linux下的flash,无论怎么修改这个值,都没有效果。    this.ensureDefault("post_params", {});   // 附加参数,可以自定义上传的其post他参数    this.ensureDefault("use_query_string", false);  //该属性可选值为true和false,设置post_params是否以GET方式发送。如果为false,那么则以POST形式发送。   /*

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

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

*/

     this.ensureDefault("requeue_on_error", false);  this.ensureDefault("http_success", []);  //该数组可自定义触发success事件的HTTP状态值。200的状态值始终 会触发success,并且只有200的状态会提供serverData。当接受一个200以外的HTTP状态值时,服务端不需要返回内容。
this.ensureDefault("assume_success_timeout", 0);        // File Settings    this.ensureDefault("file_types", "*.*");  //限制上传的文件类型,这个是非常有用且重要的,默认值为*.*。另外当用户指向上传图片时可以设置为”*.jpg;*.jpeg;*.gif;*.png;*.bmp;”。另外有一点非常重要的就是,这里只是浏览器端限制了上传的文件类型,服务端依然要验证上传的文件类型,否则可能是很危险的。    this.ensureDefault("file_types_description", "All Files");   //弹出文件选择框中,保存类型的描述    this.ensureDefault("file_size_limit", 0);    // Default zero means "unlimited",单位kb, 限制文件大小    this.ensureDefault("file_upload_limit", 0);  //设置SWFUpload实例允许上传的最多文件数量,同时也是设置对象中file_queue_limit属性的上限。一旦用户已经上传 成功或者添加文件到队列达到上最大数量,那么就不能继续添加文件了。特殊值0表示允许上传的数量无限制。只有上传成功(上传触发了uploadSuccess事件)的文件才会在上传数 量限制中记数。使用setStats方法可以修改成功上传的文件数量。 注意:该值不能跨页面使用,当页面刷新以后该值也被重置。严格的文件上传数量限制应该由服务端来检测、管理。 this.ensureDefault("file_queue_limit", 0);   //允许队列存在的文件数量,默认值为0,即不限制。当文件队列中的文件数超过该值便不再允许添加文件。    // Flash Settings    this.ensureDefault("flash_url", "swfupload.swf");   //flash地址同upload_url,可以为相对于swf文件的地址或是域名地址    this.ensureDefault("flash9_url", "swfupload_fp9.swf");   //flash9版本地址(考虑兼容性) 同upload_url,可以为相对于swf文件的地址或是域名地址    this.ensureDefault("prevent_swf_caching", true);    //是否阻止flash缓存        // Button Settings    this.ensureDefault("button_image_url", "");     //上传按钮图片地址    this.ensureDefault("button_width", 1);    this.ensureDefault("button_height", 1);    this.ensureDefault("button_text", "");    this.ensureDefault("button_text_style", "color: #000000; font-size: 16pt;");    this.ensureDefault("button_text_top_padding", 0);    this.ensureDefault("button_text_left_padding", 0);    this.ensureDefault("button_action", SWFUpload.BUTTON_ACTION.SELECT_FILES);    this.ensureDefault("button_disabled", false);    this.ensureDefault("button_placeholder_id", "");    //被替换的按钮位置id    this.ensureDefault("button_placeholder", null);    this.ensureDefault("button_cursor", SWFUpload.CURSOR.ARROW);   //鼠标状态,可选值见SWFUpload.CURSOR属性    this.ensureDefault("button_window_mode", SWFUpload.WINDOW_MODE.WINDOW);   //flash中wmode的状态,可选择参考SWFUpload.WINDOW_MODE属性        // Debug Settings    this.ensureDefault("debug", false);    this.settings.debug_enabled = this.settings.debug;    // Here to maintain v2 API        // Event Handlers    this.settings.return_upload_start_handler = this.returnUploadStart;    this.ensureDefault("swfupload_preload_handler", null);    this.ensureDefault("swfupload_load_failed_handler", null);    this.ensureDefault("swfupload_loaded_handler", null);    this.ensureDefault("file_dialog_start_handler", null);   //用户点击“选择文件”按钮,文件选择框弹出前会触发    this.ensureDefault("file_queued_handler", null);    this.ensureDefault("file_queue_error_handler", null);    this.ensureDefault("file_dialog_complete_handler", null);        this.ensureDefault("upload_resize_start_handler", null);    this.ensureDefault("upload_start_handler", null);   //用户点击上传按钮, swfupload响应并在上传前会触发uploadStart事件    this.ensureDefault("upload_progress_handler", null);  //文件上传过程中会不停的触发uploadProgress事件    this.ensureDefault("upload_error_handler", null);    //上传出错    this.ensureDefault("upload_success_handler", null);  //上传成功    this.ensureDefault("upload_complete_handler", null);  //文件上传完成,在upload_error_handler或者upload_success_handler之后触发        this.ensureDefault("mouse_click_handler", null);    this.ensureDefault("mouse_out_handler", null);    this.ensureDefault("mouse_over_handler", null);        this.ensureDefault("debug_handler", this.debugMessage);    this.ensureDefault("custom_settings", {});    // Other settings    this.customSettings = this.settings.custom_settings;        // Update the flash url if needed    if (!!this.settings.prevent_swf_caching) {        this.settings.flash_url = this.settings.flash_url + (this.settings.flash_url.indexOf("?") < 0 ? "?" : "&") + "preventswfcaching=" + new Date().getTime();        this.settings.flash9_url = this.settings.flash9_url + (this.settings.flash9_url.indexOf("?") < 0 ? "?" : "&") + "preventswfcaching=" + new Date().getTime();    }        if (!this.settings.preserve_relative_urls) {        this.settings.upload_url = SWFUpload.completeURL(this.settings.upload_url);        this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);    }        delete this.ensureDefault;};

配置例子:

var swfu = '';$(document).ready(function(){swfu = new SWFUpload({flash_url:"http://test.phpcms.com/statics/js/swfupload/swfupload.swf?"+Math.random(),upload_url:"http://test.phpcms.com/index.php?m=attachment&c=attachments&a=swfupload&dosubmit=1",file_post_name : "Filedata",post_params:{
"SWFUPLOADSESSID":"1377135247","module":"content","catid":"14","userid":"1","siteid":"1","dosubmit":"1","thumb_width":"0", "thumb_height":"0","watermark_enable":"1","filetype_post":"gif|jpg|jpeg|png|bmp","swf_auth_key":"5947af2aedec6caa158c89969aba7203","isadmin":"1","groupid":"8"},file_size_limit:"2048",file_types:"*.gif;*.jpg;*.jpeg;*.png;*.bmp",file_types_description:"All Files",file_upload_limit:"50",custom_settings : {progressTarget : "fsUploadProgress",cancelButtonId : "btnCancel"},button_image_url: "",button_width: 75,button_height: 28,button_placeholder_id: "buttonPlaceHolder",button_text_style: "",button_text_top_padding: 3,button_text_left_padding: 12,button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,button_cursor: SWFUpload.CURSOR.HAND,file_dialog_start_handler : fileDialogStart,file_queued_handler : fileQueued,file_queue_error_handler:fileQueueError,file_dialog_complete_handler:fileDialogComplete,upload_progress_handler:uploadProgress,upload_error_handler:uploadError,upload_success_handler:uploadSuccess,upload_complete_handler:uploadComplete});})

 

 三:回调函数

 

参考备注:

官方网站:(英文)

官方例子:(英文)

SWFUpload v2.2.0.1 手册: (英文)

SWFUpload下载地址

手册地址:

转载于:https://www.cnblogs.com/Alight/p/3274192.html

你可能感兴趣的文章
django迁移数据库错误
查看>>
yii 跳转页面
查看>>
洛谷 1449——后缀表达式(线性数据结构)
查看>>
[最小割][Kruskal] Luogu P5039 最小生成树
查看>>
Data truncation: Out of range value for column 'Quality' at row 1
查看>>
Dirichlet分布深入理解
查看>>
(转)Android之发送短信的两种方式
查看>>
python第九天课程:遇到了金角大王
查看>>
字符串处理
查看>>
ECharts(Enterprise Charts 商业产品图表库)初识
查看>>
LeetCode Factorial Trailing Zeroes (阶乘后缀零)
查看>>
hdu 5402 Travelling Salesman Problem (技巧,未写完)
查看>>
[AIR] 获取U盘,打开U盘
查看>>
HtmlUnitDriver 网页内容动态抓取
查看>>
ad logon hour
查看>>
获得进程可执行文件的路径: GetModuleFileNameEx, GetProcessImageFileName, QueryFullProcessImageName...
查看>>
证件照(1寸2寸)拍摄处理知识汇总
查看>>
罗马数字与阿拉伯数字转换
查看>>
Eclipse 反编译之 JadClipse
查看>>
asp.net 获取IP地理位置的几个主要接口
查看>>