多个swfupload实例上传图片,缩略图


先生成一个swfupload实例

        var swfu_0 = new SWFUpload({
            // Backend Settings
            upload_url: "index.php?_p=repair&_a=upload", //上传地址
            post_params: {"PHPSESSID": "<?php echo session_id(); ?>"},

            // File Upload Settings
            file_size_limit: "3 MB", // 2MB
            file_types: "*.jpg;*.bmp;*.gif;*.png",
            file_types_description: "JPG Images",
            file_upload_limit: "3",

            // Event Handler Settings - these functions as defined in Handlers.js
            //  The handlers are not part of SWFUpload but are part of my website and control how
            //  my website reacts to the SWFUpload events.
//            file_queued_handler: fileQueued,
            file_queue_error_handler: fileQueueError,
            file_dialog_complete_handler: fileDialogComplete,
            upload_progress_handler: uploadProgress,
            //upload_error_handler:uploadError,
//            upload_start_handler: uploadStart,
            upload_success_handler: uploadSuccess,
//            upload_complete_handler: uploadComplete,
            swfupload_loaded_handler: loaded,//初始化函数,列表展示用

            // Button Settings
            button_image_url: "/static/images/TestImageNoText_80x26.png",
            button_placeholder_id: "spanButtonPlaceholder",//上传图片“按钮”
            button_width: 85,
            button_height: 26,
            button_text: '<span class="button" >添加图片</span>',
            button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height:26px;color:#ffffff; }',//标准css格式
            button_text_top_padding: 3,
            button_text_left_padding: 18,
            button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
            button_cursor: SWFUpload.CURSOR.HAND,


            // Flash Settings
            flash_url: "/static/js/swfupload/swfupload/swfupload.swf",

            custom_settings: {
//                progressTarget: "fsUploadProgress",
//                cancelButtonId: "btnCancel",
                upload_target: "divFileProgressContainer",//
                swf_id: 'swfu_0',//swf实例id
                swf_thum_id: 'thumbnails_0',//上传图片组id
                swf_thum_del_id: 'thum_del_0'//删除图片组id

            },

            // Debug Settings
            debug: false
        });


点击按钮上传,php处理:保存图片,然后生成缩略图(生成缩略图函数http://www.phper.org.cn/?post=26)保存到session的file_info字段里

    $minImg = MiniImg($filePath, '100 * 100');
    ob_start();
//    header("Content-Type: image/png");
    readfile($minImg);
    $img = ob_get_contents();
    ob_end_clean();
    $_SESSION["file_info"]['thum_id'] = $img;

返回格式"FILEID:" . $thumid . '&url=' . $imgpath;


js的uploadSuccess函数:

if (serverData.substring(0, 7) === "FILEID:") {
	addImage("/index.php?_p=repair&_a=thumbnail&id=" + serverData.substring(7, 39) + "&url=" + serverData.substring(39), this);
}
//显示缩略图
function addImage(src, swf) {
    var stats = swf.getStats();
    var i = stats.successful_uploads;//删除的序号

    $("#" + swf.customSettings.swf_thum_id).append("<span class='uploadpic'><img src='" + src + "' width='60' height='60' /><a href='#' id='" + swf.customSettings.swf_thum_del_id + i + "'>删除 </a><input name='" + swf.customSettings.swf_thum_id + "[]' type='text' style='display:none' value='" + src + "'></span>");
    //删除图片
    $("#" + swf.customSettings.swf_thum_del_id + i).bind("click", function () {
        $(this).parent().remove();
        //swfu参见iframe页面中的 swfu = new SWFUpload(settings);
        stats.successful_uploads--;
        swf.setStats(stats);
    });
}

列表页初始化swfupload

function loaded() {
    var jsThum_ = jsThum[this.customSettings.swf_thum_key];//图片路径事先保存到js数组里
    if (jsThum_.length != 0) {
        for (var k in jsThum_) {
            var stats = this.getStats();
            stats.successful_uploads++;
            this.setStats(stats);
            addImage(jsThum_[k], this);

        }
    }
}


参考链接: http://hyshucom.iteye.com/blog/1674839
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值