jquery.qupload.js 11 KB
/**
 * upload plugin
 * 
 */
var $ = require('yoho.jquery');
var SWFUpload = require('./swfupload.queue').SWFUpload;

var file_upload_limit = 6;
$.fn.extend({
    qupload : function(options) {
        writeProgressHtml();
        initSwfUpload($(this).attr('id'), options);
    }
});

var hasProgreeHtml = 0;

// 创建进度条的html
function writeProgressHtml() {
    if (hasProgreeHtml == 0) // 一个页面只创建一次
    {
        $('body')
                .append(
                        '<div id="progressDialog" style="display: none;width:370px;height:80px !important;"><div style="padding:10px 20px;"><span id="curUploadStatus">图片上传中……请稍等</span><div id="progress"></div></div></div>');
        hasProgreeHtml = 1;
    }
}

function setUploadStatus(uploadNum, totalUploadNum) {
    $('#uploadNum').html(uploadNum);
    $('#totalUploadNum').html(totalUploadNum);
}

// 初始化swf
function initSwfUpload(btnId, options) {
    // 上传成功的回调函数
    var uploadSuccessCallBack = null;
    if (options.uploadSuccessed != undefined) {
        uploadSuccessCallBack = options.uploadSuccessed;
    }
    // 上传的key
    var uploadKeyValue = '';
    if (options.uploadKey != undefined) {
        uploadKeyValue = options.uploadKey;
    }

    // 上传之前可以做的操作参数
    var preUploadCallBack = null;
    if (options.preupload != undefined) {
        preUploadCallBack = options.preupload;
    }

    // 弹出层ID
    var progressDivId = 'progressDialog';
    // 进度条ID
    var progressTargetId = 'progress';

    // 共有多少张需要上传
    var totalUploadNum = 0;

    // 当前已经上传的张数
    var curUploadedNum = 0;

    this.options = options;

    var numTest = 0;
    
    var errmsg_box = this.options.errmsg_box;

    // 设置默认值函数
    function setDefaultValue(optionName, optionValue) {
        this.options[optionName] = options[optionName] == undefined ? optionValue
                : options[optionName];
    }

    setDefaultValue('flash_url',
            "http://static.yohobuy.com/admin/js/swfupload/swfupload.swf");
    setDefaultValue('upload_url', "http://upload.yohobuy.com");
    setDefaultValue('file_post_name', "Filedata");
    setDefaultValue('file_size_limit', "2 MB");
    setDefaultValue('file_types', "*.*");
    setDefaultValue('file_types_description', "All Files");
    setDefaultValue('file_upload_limit', file_upload_limit);
    setDefaultValue('file_queue_limit', 0);
    setDefaultValue('button_image_url',
            "http://static.yohobuy.com/admin/images/btn_swfupload.png");
    setDefaultValue('button_width', "104");
    setDefaultValue('button_height', "20");
    setDefaultValue('button_text', '<span class="btn_upload_xzzp">选择本地照片</span>');
    setDefaultValue('button_text_style', '.btn_upload_xzzp{color:#ffffff}');
    setDefaultValue('button_text_left_padding', 24);
    setDefaultValue('button_text_top_padding', 0);
    setDefaultValue('button_window_mode', 'TRANSPARENT');
    setDefaultValue('button_cursor', '-2');

    var settings = {
        flash_url : this.options.flash_url,
        upload_url : this.options.upload_url,
        file_post_name : this.options.file_post_name,
        // post_params: {"PHPSESSID" : "<?php echo session_id(); ?>"},
        file_size_limit : this.options.file_size_limit,
        file_types : this.options.file_types,
        file_types_description : this.options.file_types_description,
        file_upload_limit : this.options.file_upload_limit,
        file_queue_limit : this.options.file_queue_limit,
        prevent_swf_caching : false,
        preserve_relative_urls : false,
        custom_settings : {

        },
        debug : false,

        // Button settings
        button_image_url : this.options.button_image_url,
        button_width : this.options.button_width,
        button_height : this.options.button_height,
        button_placeholder_id : btnId,
        button_text : this.options.button_text,
        button_text_style : this.options.button_text_style,
        button_text_left_padding : this.options.button_text_left_padding,
        button_text_top_padding : this.options.button_text_top_padding,
        button_window_mode : this.options.button_window_mode,
        button_cursor : this.options.button_cursor,

        // The event handler functions are defined in handlers.js
        file_dialog_start_handler : fileDialogStart,
        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,
        button_action: this.options.button_action
    };

    var swfu = new SWFUpload(settings);

    function fileQueued(file) {
        try {

        } catch (ex) {
            this.debug(ex);
        }

    }

    function fileQueueError(file, errorCode, message) {
        var errmsg;
        try {
            if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
                alert("您尝试上传太多文件.\n"
                        + (message === 0 ? "您已达到上传限制." : "您最多还可以 "
                                + (message > 1 ? "上传 " + message + "文件."
                                        : "一个文件.")));
                return;
            }
            
            // var progress = new FileProgress(file,
            // this.customSettings.progressTarget);
            // progress.setError();
            // progress.toggleCancel(false);
            switch (errorCode) {
            
            case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                // progress.setStatus("File is too big.");
                
                errmsg = '文件超过'+settings.file_size_limit/1024+'M';
                alert(errmsg);
                this.debug("Error Code: File too big, File name: "
                                + file.name + ", File size: " + file.size
                                + ", Message: " + message); 
                break;
            case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
                // progress.setStatus("Cannot upload Zero Byte files.");
                alert('请上传有内容的文件!');
                this.debug("Error Code: Zero byte file, File name: "
                        + file.name + ", File size: " + file.size
                        + ", Message: " + message);
                break;
            case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
                alert('请上传指定类型的文件!');
                this.debug("Error Code: Invalid File Type, File name: "
                        + file.name + ", File size: " + file.size
                        + ", Message: " + message);
                break;
            default:
                if (file !== null) {
                    // progress.setStatus("Unhandled Error");
                }
                alert('上传文件失败,请稍后在试!');
                this.debug("Error Code: " + errorCode + ", File name: "
                        + file.name + ", File size: " + file.size
                        + ", Message: " + message);
                break;
            }
        } catch (ex) {
            this.debug(ex);
        }
    }

    function fileDialogStart() {
        if (preUploadCallBack != null) {
            preUploadCallBack();
        }
    }

    // 选择文件完成
    function fileDialogComplete(numFilesSelected, numFilesQueued) {
        try {

            if (numFilesSelected > 0) {
                // document.getElementById(this.customSettings.cancelButtonId).disabled
                // = false;
                totalUploadNum = numFilesSelected;
                curUploadedNum = 1;
                setUploadStatus(curUploadedNum, totalUploadNum);
                this.startUpload();
            }

        } catch (ex) {
            this.debug(ex);
        }
    }

    // 开始上传
    function uploadStart(file) {
        this.addPostParam('_key', uploadKeyValue);
        //$('#' + progressDivId).dialog();
    }

    // 上传进度
    function uploadProgress(file, bytesLoaded, bytesTotal) {
        // $('#uploadData').html(bytesLoaded + "/" + bytesTotal);
        // $('#uploadData').html( $('#uploadData').html() + ' - ' + bytesLoaded
        // + '+' + ',' + bytesTotal );
        var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);
        //$("#progress").progressbar({
        //  value : percent
        //});
    }

    // 上传成功
    function uploadSuccess(file, serverData) {
        curUploadedNum++;
        setUploadStatus(curUploadedNum, totalUploadNum);
        if (uploadSuccessCallBack != null) {
            uploadSuccessCallBack(serverData);
        }
    }

    // 上传出错
    function uploadError(file, errorCode, message) {

        try {
            if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
                alert("您尝试上传太多文件.\n"
                        + (message === 0 ? "您已达到上传限制." : "您最多还可以 "
                                + (message > 1 ? "上传 " + message + "文件."
                                        : "一个文件.")));
                return;
            }
            switch (errorCode) {
            
            case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                alert("Error Code: 文件太大。 文件名为: " + file.name + ", 大小为: "
                        + file.size + ", Message: " + message);
                break;
            case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:

                alert("Error Code: 文件为0, 文件名为: " + file.name + ", 大小为: "
                        + file.size + ", Message: " + message);
                break;
            case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
                alert("Error Code: 文件类型不合要求, 文件名为: " + file.name + ", 大小为: "
                        + file.size + ", Message: " + message);
                break;
            default:
                if (file !== null) {

                }
                alert("上传出错" + "Error Code: " + errorCode + ", File name: "
                        + file.name + ", File size: " + file.size
                        + ", Message: " + message);
                break;
            }
        } catch (ex) {
            this.debug(ex);
        }
    }

    // 上传完成
    function uploadComplete(file) {
        //$('#' + progressDivId).dialog('close');
    }

    // This event comes from the Queue Plugin
    function queueComplete(numFilesUploaded) {

    }
}

window.SWFUpload = SWFUpload;