swfupload的使用心得,关键是handler的自定义,温故而知新

今天再写了个通过swfupload实现上传的页面,想起许久以前学习swfupload的使用时心得没及时记下来,如今补上。

  1. 下载swfupload

    项目地址:http://code.google.com/p/swfupload/

  2. 页面加载两个必须的文件

    swfupload/swfupload.js 和 swfupload/handlers.js

  3. 调用方法

    发个实例,各参数可通过API了解,若觉得API内容太多,可继续看下面会的部分解释

    别人博客上的中文API:http://www.cnblogs.com/henw/archive/2012/03/22/2411592.html

     var settings = {
         flash_url : "/js/swfupload/swfupload.swf",
         flash9_url : "/js/swfupload/swfupload_fp9.swf",
         upload_url: "uploadaction.php",
         post_params: {"PHPSESSID" : "<?php echo session_id(); ?>"},
         file_size_limit : "3 MB",
         file_types : "*.jpg;*.gif;*.png;*.jpeg",
         file_types_description : "图片",
         file_upload_limit : 100,
         file_queue_limit : 0,
         custom_settings : {
             progressTarget : "fsUploadProgress",
             imageField : "Content_image",
             imageViewField : "image_preview"
         },
         debug: false,
         // Button settings
         button_image_url: "/images/SmallSpyGlassWithTransperancy_17x18.png",
         button_width: "140",
         button_height: "18",
         button_placeholder_id: "spanButtonPlaceHolder",
         button_text: '<span class="sud_btn">本地上传 <span class="sud_sbtn">(2 MB max)</span></span>',
         button_text_style: '.sud_btn { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .sud_sbtn { font-size: 10pt; }',
         button_text_top_padding: 0,
         button_text_left_padding: 18,
         button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
         button_cursor: SWFUpload.CURSOR.HAND,
         // The event handler functions are defined in handlers.js
         swfupload_preload_handler : preLoad,
         swfupload_load_failed_handler : loadFailed,
         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 : uploadSuccessForSmallImage,
         upload_complete_handler : uploadComplete,
         queue_complete_handler : queueComplete  // Queue plugin event
     };
      
     swfu = new SWFUpload(settings);
    
  4. 关于cookie bug

    swfupload上传到处理页面后sessionid会出现丢失,所以需要通过手写代码使sessionid保持一致,方法如下:

    通过post_params把当前sessionid一并提交:即上面代码中的

     post_params: {"PHPSESSID" : "<?php echo session_id(); ?>"},
    

    在upload_url所指定的处理页面中设置session_id,注意,要在session_start()之前设置,否则依然会出错

     if (isset($_POST["PHPSESSID"])) {
         session_id($_POST["PHPSESSID"]);
     }
     session_start();
    
  5. 上传按钮样式的定义

     button_image_url: "/images/SmallSpyGlassWithTransperancy_17x18.png", //背景图片
     button_width: "140", //按钮宽度
     button_height: "18", //按钮高度
     button_placeholder_id: "spanButtonPlaceHolder", //按钮将替换哪个element,通过ID确定
     button_text: '<span class="sud_btn">本地上传 <span class="sud_sbtn">(2 MB max)</span></span>', //按钮显示的文字
     button_text_style: '.sud_btn { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .sud_sbtn { font-size: 10pt; }', //按钮中显示文字的样式
     button_text_top_padding: 0, //按钮中文字的上边距
     button_text_left_padding: 18, //按钮中文字的左边距
     button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT, //按钮作为FLASH的显示模式
     button_cursor: SWFUpload.CURSOR.HAND, //鼠标经过按钮显示的形态
    
  6. 上传过程触发的函数自定义,通过handlers.js文件进行改进

     // The event handler functions are defined in handlers.js
     swfupload_preload_handler : preLoad,
     swfupload_load_failed_handler : loadFailed,
     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 : uploadSuccessForSmallImage, //定义上传成功触发函数,用于显示已上传图片结果之类的动作
     upload_complete_handler : uploadComplete, //定义上传完成触发函数,
     queue_complete_handler : queueComplete //定义队列上传完成触发函数
    

    具体的函数修改请参考原handlers.js文件,理解其中各变量的定义,修改起来便游刃有余。

其中需要提一下的:在成功函数定义中,serverData是处理页面返回的json格式的数据,在我看来,是自定义handlers中js与php的通信点

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏