• swfupload开发经验


    swfupload是浏览器上传组件,可以利用flash插件实现文件多选、批量上传。源码下载地址http://code.google.com/p/swfupload/

    作者使用的是2.5版的,查看demo文件夹,结构如图:

    从服务器访问simpledemon文件夹,页面如下:

    点击hello按钮弹出文件选择对话框,此时可以框选多个文件。选择文件上传,结果页面如下:

    这个demo很简单,这个demo主要完成了flash前端设置,在index.php文件中,var settings = {}设置了flash属性。

    注意的地方,flash可以控制文件的大小、文件的格式、一次文件的数量,后台不用进行判断控制。

    flash_url : "../swfupload/swfupload.swf",//flash文件的位置
    flash9_url : "../swfupload/swfupload_fp9.swf",// flash文件的位置
    upload_url: "upload.php",//服务器端接受文件的php位置
    post_params: {"PHPSESSID" : "<?php echo session_id(); ?>"},//如果接受上传的php文件要做session控制,保证上传session_id
    file_size_limit : "800 KB",//限制文件大小 可以使KB,MB
    file_types : "*.jpg;*.png;*.gif",//限制文件格式
    file_types_description : "JPG Images; PNG Image",//格式说明
    file_upload_limit : 100,//限制本次上传的数量
    file_queue_limit : 0,//限制队列的数量
    
    
    
    custom_settings : {
    progressTarget : "fsUploadProgress",//设置显示进度栏在页面上的id
    cancelButtonId : "btnCancel"
    },

    custom_settings设置上传按钮,id代表html页面上dom元素,加载页面时会根据配置替换该页面元素

    button_image_url: "images/TestImageNoText_65x29.png",
    button_ "65",
    button_height: "29",
    button_placeholder_id: "spanButtonPlaceHolder",
    button_text: '<span class="theFont">Hello</span>',
    button_text_style: ".theFont { font-size: 16; }",
    button_text_left_padding: 12,
    button_text_top_padding: 3,

    对照下面的代码截图,确定fsUploadProgress和spanButtonPlaceHolder的位置

    下面的代码段,设置了flash上传的相应事件,这些事件的定义在当前目录js/handler.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 : uploadSuccess,
    upload_complete_handler : uploadComplete,
    queue_complete_handler : queueComplete

    例如:upload_success_handler : uploadSuccess,

    代码在hander.js的113

    function uploadSuccess(file, serverData) {
    try {
    var progress = new FileProgress(file, this.customSettings.progressTarget);
    progress.setComplete();
    progress.setStatus("Complete.");
    progress.toggleCancel(false);
    
    } catch (ex) {
    this.debug(ex);
    }
    }

    此时用浏览器跟踪,file是flash选中的上传文件对象,serverData是upload.php返回的信息。

    二次开发可以在uploadSuccess之后做,添加js代码在页面中显示,给图片添加事件。

  • 相关阅读:
    Swing中GridBagLayout布局的使用
    Android下Slidingmenu和actionbarsherlock的使用
    Swing基础知识
    Android下的ActionBar
    android下ADT的更新
    spark插件入门完整版本
    IOS开发准备 资料集锦
    Java调用本地浏览器
    Android源码在线查看网址
    Android中ProgressBar
  • 原文地址:https://www.cnblogs.com/birdskyws/p/3906852.html
Copyright © 2020-2023  润新知