jquery.qupload.js 10.7 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;