好看的swfupload多文件上传的小插件
初始化的样子
选择文件的样子
没有选择文件的提示
提交表单时候的空验证
以下是代码var cysupload=[];
(function($) {
$.fn.cysupload = function(options) {
var idname = ;
var swfname= ;
this.initswf = function(_obj){
var rannan = $.rand(999);
classname = files_input;
idname = files_input_+rannan;
swfname=swfobj_+rannan;
var html = ;
html+= ;
this.html(html);
options.classname = classname;
options.idname = idname;
options.cobj=this;
var settings_object=this.initoptions(options);
if(typeof(settings_object)==undefined){
settings_object = {button_placeholder_id:swfname};
}else{
settings_object.button_placeholder_id=swfname;
}
cysupload[settings_object.cid] = new swfupload(settings_object);
cysupload[settings_object.cid].settings = settings_object;
cysupload[settings_object.cid].inputname = idname;
}
this.initoptions = function(options){
var settings_object = {//定义参数配置对象
upload_url : http://www.daili.com/index.php/all/upload/upload,
flash_url : /public/plugin/swfupload/swfupload.swf,
file_post_name : filedata,
use_query_string : false,
requeue_on_error : false,
http_success : [201, 202],
assume_success_timeout : 0,
file_types : *.jpg;*.gif;*.png;*.jpeg,
file_types_description: 网页图片选择,
file_size_limit : 2048,
file_upload_limit : 20,
file_queue_limit : 20,
debug : false,
prevent_swf_caching : false,
preserve_relative_urls : false,
//button_placeholder_id : element_id,
button_image_url : /public/plugin/swfupload/upload.jpg,
button_width : 85,
button_height : 22,
button_window_align:top,
button_action : swfupload.button_action.select_files,
//button_disabled : false,
button_cursor : swfupload.cursor.hand,
button_window_mode : swfupload.window_mode.transparent,
swfupload_loaded_handler : swfupload_loaded_function,
file_dialog_start_handler : file_dialog_start_function,
file_queued_handler : file_queued_function,
file_queue_error_handler : file_queue_error_function,
file_dialog_complete_handler : file_dialog_complete_function,
upload_start_handler : upload_start_function,
upload_progress_handler : upload_progress_function,
upload_error_handler : upload_error_function,
upload_success_handler : upload_success_function,
upload_complete_handler : upload_complete_function,
upload_success_all:function(){}
};
var result=$.extend({},settings_object,options);
return result;
};
this.initswf(this);
};
$.addallparam=function(options,_callback){
if($.jsonlength(options)>0){
var len = $.getobjlength();
for(var i=0;i var options = $.extend({},options,cysupload[i].settings.post_params);
cysupload[i].setpostparams(options);
}
}
if(typeof(_callback)==function){
_callback();
}
}
$.jsonlength=function(_json){
var len = 0;
for(p in _json){
len++;
}
return len;
}
$.rand = function getrandom(n){
function s4() {
return (((1+math.random())*0x10000)|0).tostring(16).substring(1);
}
return (s4()+s4()+_+s4()+_+s4()+_+s4()+_+s4()+s4()+s4());
}
//type 1进度条模式，2提示模式
$.process=function(options){
var settings_object={
pcolor:#cdfead,
pbgcolor:#47ae02,
tcolor:#d0ebfd,
tbgcolor:#055387,
floatid:cysupload[options.cid].settings.idname,
appendobj:cysupload[options.cid].settings.cobj,
name:fileprocess_+options.cid,
type:1,
msg:,
process_tag:/,
process_bai:true,
process_bytes:true,
bytes_compeled:0,
bytes_total:0,
total_files:0,
now_file_id:0,
compele_files:0,
select_files:0
}
settings_object=$.extend({},settings_object,options);
var bgclname = 'process_bg'+settings_object.cid;
var qbgclname= 'process_qbg'+settings_object.cid;
var process_html=
;
var process_bg =
;
var process_qbg =
;
if($(#+settings_object.name).length>0){
$(#+settings_object.name).remove();
if($(.+bgclname).length>0||$(.+qbgclname).length){
$(.+bgclname).remove();
$(.+qbgclname).remove();
}
}
var apendobj = settings_object.appendobj;
$(process_html).appendto(apendobj);
$(process_bg).appendto(apendobj);
$(process_qbg).appendto(apendobj);
apendobj.css({
position:relative
});
var floatobj = $(#+settings_object.floatid);
var _w=floatobj.innerwidth();
var _h=floatobj.innerheight();
var top=floatobj.css(border-top-width);
var left=floatobj.css(border-left-width);
if(settings_object.type==1){
var _ts = settings_object.total_files;
var _bc = settings_object.bytes_compeled;
var _bt = settings_object.bytes_total;
var _cf = settings_object.compele_files;
var one_util_width = math.ceil((_w*100)/(_ts*100));
var now_width = one_util_width*_cf;
var next_width = math.ceil((_bc*100)/(_bt*100))*one_util_width;
next_width = next_width+now_width;
if(next_width>=_w){
next_width=_w;
}
$(#+settings_object.name).css({
color:settings_object.pcolor,
background:settings_object.pbgcolor,
text-align:center,
width:now_width+px,
height:_h+px,
line-height:_h+px,
position:absolute,
top:top,
left:left,
z-index:3
});
$(.+bgclname).css({
color:settings_object.pcolor,
background:#5b5a4e,
text-align:center,
width:_w+px,
height:_h+px,
line-height:_h+px,
position:absolute,
top:top,
left:left,
z-index:2
});
$(.+qbgclname).css({
color:settings_object.pcolor,
background:transparent,
text-align:center,
width:_w+px,
height:_h+px,
line-height:_h+px,
position:absolute,
top:top,
left:left,
z-index:4
});
settings_object.msg=;
if(settings_object.process_bai){
if(_ts>1){
var percent = (_cf*100)/(_ts*100)*100;
}else{
var percent = (_bc*100)/(_bt*100)*100;
}
settings_object.msg+=parsefloat(percent).tofixed(2);
settings_object.msg+= %,;
if((_cf+1) settings_object.msg+=正在上传第+(_cf+1)+个文件[+_bc+/+_bt+];
}else{
settings_object.msg+=正在上传第+(_cf)+个文件[+_bc+/+_bt+];
}
if(_ts==(_cf+1)&&_bc==_bt){
settings_object.msg=已上传完毕！;
}
}
$(#+settings_object.name).stop(true,true).animate({width:next_width},300);
$(.+qbgclname).html(settings_object.msg);
}else if(settings_object.type==2){
$(#+settings_object.name).css({
color:settings_object.tcolor,
background:settings_object.tbgcolor,
text-align:center,
width:_w+px,
height:_h+px,
line-height:_h+px,
position:absolute,
top:top,
left:left,
z-index:3
});
$(#+settings_object.name).html(settings_object.msg);
}
}
$.getobjlength=function(){
var len = parseint(cysupload.length);
return len;
};
$._nullcheck=function(_index){
if(cysupload[_index].select_num==0||cysupload[_index].select_num==0||typeof(cysupload[_index].select_num)==undefined){
var _msg = 亲爱的，至少放点东西在我里面;
$.process({type:2,tcolor:#ffb9b9,tbgcolor:#990000,msg:_msg,cid:_index});
return false;
}else{
return true;
}
}
$.nullcheck = function(_obj){
var _null = true;
if(_obj.length>0){
_obj.each(function(i){
if(!$._nullcheck(i)){
_null = false;
}
});
}
return _null;
}
$.doupload=function(){
cysupload[0].startupload();
}
$.errormsg = function(code){
if(code return false;
}else{
return true;
}
}
})(jquery);
//确实是影片加载之后调用的
function swfupload_loaded_function(){
}
//弹出文件选择框之前的句柄捕获
function file_dialog_start_function(){
cysupload[this.settings.cid].cancelqueue();
}
//队列句柄捕获,当一个文件被加入进去的事件时触发,多次调用！
function file_queued_function(file){
}
//当文件添加到上传队列失败时触发此事件，失败的原因可能是文件大小超过了你允许的数值、文件是空的或者文件队列已经满员了等。
function file_queue_error_function(file,errmsg){
cysupload[this.settings.cid].error=errmsg;
var code = errmsg*-1;
if(code==100){
var _msg = 亲爱的，本插件只允许+cysupload[this.settings.cid].settings.file_queue_limit+个同时插入哦！;
}else if(code==130){
var _msg = 亲爱的，本插件只允许图片文件的插入哦！;
}else if(code==110){
var _msg = 亲爱的，你放进人家那里的东西太大了;
}else if(code==120){
var _msg = 亲爱的，你的东西太小了，本插件没有感受到它的存在;
}
$.process({type:2,tcolor:#ffb9b9,tbgcolor:#990000,msg:_msg,cid:this.settings.cid});
}
//当文件选取完毕且选取的文件经过处理后（指添加到上传队列），会立即触发该事件。可以在该事件中调用this.startupload()方法来实现文件的自动上传
//参数select_num指本次在文件选取框里选取的文件数量
//参数queued_num指本次被添加到上传队列的文件数量
//参数queued_total_num指当前上传队列里共有多少个文件（包括了本次添加进去的文件）
function file_dialog_complete_function(select_num,queued_num){
cysupload[this.settings.cid].select_num = select_num;
if(select_num>0){
var _msg = 选择了+select_num+个文件;
$.process({type:2,select_files:select_num,msg:_msg,cid:this.settings.cid});
}else{
var _msg = 你没有选择任何文件！;
$.process({type:2,tcolor:#ffb9b9,tbgcolor:#990000,select_files:select_num,msg:_msg,cid:this.settings.cid});
}
}
//当文件即将上传时会触发该事件,该事件给了你在文件上传前的最后一次机会来验证文件信息、
//增加要随之上传的附加信息或做其他工作。可以通过返回false来取消本次文件的上传
function upload_start_function(file){
}
//该事件会在文件的上传过程中反复触发，可以利用该事件来实现上传进度条
//参数file为文件信息对象
//参数completebytes为当前已上传的字节数
//参数totalbytes为文件总的字节数
function upload_progress_function(file,completebytes,totalbytes){
var status = cysupload[this.settings.cid].getstats();
var a1 = parseint(status.files_queued);
var a2 = parseint(status.successful_uploads);
var a3 = parseint(status.upload_errors);
var totalsfiles = a1+a2+a3;
$.process({
now_file_id:file.id,
total_files:totalsfiles,
compele_files:a2,
bytes_compeled:completebytes,
bytes_total:totalbytes,cid:this.settings.cid
});
}
//文件上传被中断或是文件没有成功上传时会触发该事件。停止、取消文件上传或是在uploadstart事件中返回false都会引发这个事件，
//但是如果某个文件被取消了但仍然还在队列中则不会触发该事件
//参数file为文件信息对象
//参数error_code为错误代码，具体的可参照swfupload.upload_error中定义的常量
function upload_error_function(file,error_code){
}
//当一个文件上传成功后会触发该事件
//参数file为文件信息对象
//参数server_data为服务器端输出的数据
function upload_success_function(file,server_data){
if(typeof(cysupload[this.settings.cid].settings.upload_success_one)==function){
cysupload[this.settings.cid].settings.upload_success_one(server_data);
}
}
//当一次文件上传的流程完成时（不管是成功的还是不成功的）会触发该事件，该事件表明本次上传已经完成，
//上传队列里的下一个文件可以开始上传了。该事件发生后队列中下一个文件的上传将会开始
function upload_complete_function(file){
var _index = this.settings.cid;
if (this.getstats().files_queued === 0) {
if(_index==($.getobjlength()-1)){
upload_all_complete();
}else{
var _next = _index+1;
cysupload[_next].startupload();
}
} else {
cysupload[_index].startupload();
}
}
//当所有文件都上传成功之后
function upload_all_complete(){
if(typeof(cysupload[0].settings.upload_success_all)==function){
cysupload[0].settings.upload_success_all();
}
}
ad：真正免费，域名+虚机+企业邮箱=0元