前提:

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

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

一:下载SWFUpload

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

下载完后解压到某个目录,我这里放在www.hongxiang100.com/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插件集成了swfobject库,用于将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
});
})

三:回调函数

参考备注:

http://devilswrwr.blog.163.com/blog/static/65838670201271725934329/

官方网站:http://www.swfupload.org/(英文)

官方例子:http://demo.swfupload.org/(英文)

SWFUpload v2.2.0.1 手册: http://demo.swfupload.org/Documentation/(英文)

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

手册地址:http://leeon.me/upload/other/swfupload.html#events

最新文章

  1. 【MVVM DEV】DataColumn中的TextBox与ComboBox的并存
  2. Google Chrome 应用商店上传扩展程序
  3. 【转】让Bootstrap 3兼容IE8浏览器
  4. easyui-tabs图标(获取焦点时显示图标,失去焦点时隐藏图标)
  5. sql数据库带补全终端命令
  6. Composer 中国镜像
  7. activity调用finish方法理解
  8. Setup VSFTPD Server with Virtual Users On CentOS, RHEL, Scientific Linux 6.5/6.4/6.3
  9. Android护眼模式功能小记
  10. L2-002 链表去重 (25 分) (模拟)
  11. ASP.NET - ADO.NET框架
  12. DOBRI
  13. c#: 任务栏进度显示(TaskbarManager)
  14. Oracle测试环境参数调整.
  15. CSS, JavaScript 压缩, 美化, 加密, 解密
  16. jvm 基础
  17. 【arc093f】Dark Horse(容斥原理,动态规划,状态压缩)
  18. windows下安装redis(转)
  19. [译]聊聊C#中的泛型的使用(新手勿入) Seaching TreeVIew WPF 可编辑树Ztree的使用(包括对后台数据库的增删改查) 字段和属性的区别 C# 遍历Dictionary并修改其中的Value 学习笔记——异步 程序员常说的「哈希表」是个什么鬼?
  20. 洛谷 1155 (NOIp2008)双栈排序——仔细分析不合法的条件

热门文章

  1. N年的经验在别人眼里是怎么看的?
  2. Spring+DBUnit+H2----项目单元测试
  3. 简单概率dp-hdu-4487-Maximum Random Walk
  4. eclipse导入web项目各种错误
  5. CSDN日报20170310——《假如我是一行代码》
  6. 学习中遇到的c++问题,持续更新
  7. html5调用摄像头实现拍照
  8. ipa 打包遇到的坑
  9. ElasticSearch异常归纳(能力工场小马哥)
  10. webpack 编译ES6插件babel-loader