jquery.qupload.js 9.85 KB
/**
 * @fileOverview 上传调用插件封装
 * @author:Hbomb(zhouqq@yoho.cn) 
 * @date:2012-07-26
 */
define('lib/ui/jquery.qupload', function(require) 
{
    var $ = require("jquery");
    
    window.SWFUpload = require("lib/ui/swfupload/swfupload");
    
    /**
     * upload plugin
     * 
     */
    var file_upload_limit = 6;
    $.fn.extend({
    	qupload : function(options) {
    		writeProgressHtml();
    		initSwfUpload($(this)[0].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;
    
    	// 设置默认值函数
    	function setDefaultValue(optionName, optionValue) {
    		this.options[optionName] = options[optionName] == undefined ? optionValue
    				: options[optionName];
    	}
    
    	setDefaultValue('flash_url',"http://res."+YohoConfig.domain+"/res/www/js/lib/ui/swfupload/swfupload.swf?rnd="+Math.random());
    	setDefaultValue('upload_url', YohoConfig.uploadUrl);
    	setDefaultValue('file_post_name', "Filedata");
    	setDefaultValue('file_size_limit', "8 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://res."+YohoConfig.domain+"/res/www/images/ui/btn_hs_bdtp.png");
    	setDefaultValue('button_width', "70");
    	setDefaultValue('button_height', "20");
    	setDefaultValue('button_text', '<span class="btn_h_bdtp"></span>');
    	setDefaultValue('button_text_style', '.btn_upload_xzzp{color:#000000;background-color:#000000}');
    	setDefaultValue('button_text_left_padding', 10);
    	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
    	};
    
    	var swfu = new SWFUpload(settings);
    
    	function fileQueued(file) {
    		try {
    
    		} catch (ex) {
    			this.debug(ex);
    		}
    
    	}
    
    	function fileQueueError(file, errorCode, message) {
    		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.");
    				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.");
    				this.debug("Error Code: Zero byte file, File name: "
    						+ file.name + ", File size: " + file.size
    						+ ", Message: " + message);
    				break;
    			case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
    				// progress.setStatus("Invalid File Type.");
    				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");
    				}
    				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) {
    
    	}
    }
});