swfupload分享一段自定义的配置
- WBOY原创
- 2016-06-07 11:40:171110浏览
好看的swfupload多文件上传的小插件
初始化的样子
选择文件的样子
没有选择文件的提示
提交表单时候的空验证
以下是代码var CYSUPLOAD=[];<br>
(function($) {<br>
$.fn.cysupload = function(options) {<br>
var Idname = "";<br>
var Swfname= "";<br>
this.initswf = function(_obj){<br>
var ranNan = $.rand(999);<br>
Classname = "files_input";<br>
Idname = "files_input_" ranNan;<br>
Swfname="Swfobj_" ranNan;<br>
var html = "<input value='' readonly class='" Classname "' id='" Idname "' />";<br>
html = "<i id='" Swfname "'></i>";<br>
this.html(html);<br>
options.Classname = Classname;<br>
options.Idname = Idname;<br>
options.Cobj=this;<br>
var settings_object=this.initOptions(options);<br>
if(typeof(settings_object)=="undefined"){<br>
settings_object = {button_placeholder_id:Swfname};<br>
}else{<br>
settings_object.button_placeholder_id=Swfname;<br>
}<br>
CYSUPLOAD[settings_object.cid] = new SWFUpload(settings_object);<br>
CYSUPLOAD[settings_object.cid].settings = settings_object;<br>
CYSUPLOAD[settings_object.cid].inputname = Idname;<br>
<br>
}<br>
<br>
<br>
this.initOptions = function(options){<br>
var settings_object = {//定义参数配置对象<br>
upload_url : "http://www.daili.com/index.php/All/upload/upload",<br>
flash_url : "/Public/plugin/swfupload/swfupload.swf",<br>
file_post_name : "Filedata",<br>
use_query_string : false,<br>
requeue_on_error : false,<br>
http_success : [201, 202],<br>
assume_success_timeout : 0,<br>
file_types : "*.jpg;*.gif;*.png;*.jpeg",<br>
file_types_description: "网页图片选择",<br> 文件大小限制：“2048”，<br>
文件上传限制：20，<br>
file_queue_limit : 20,<br>
调试：错误，<br>
Prevent_swf_caching：假，<br>
keep_relative_urls : 假，<br>
//button_placeholder_id : “element_id”,<br>
button_image_url : "/Public/plugin/swfupload/upload.jpg",<br>
按钮宽度：85，<br>
按钮高度：22，<br>
Button_window_align:"顶部",<br>
Button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,<br>
//button_disabled : false,<br>
按钮光标：SWFUpload.CURSOR.HAND，<br>
Button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,<br>
swfupload_loaded_handler : swfupload_loaded_function,<br>
file_dialog_start_handler : file_dialog_start_function,<br>
file_queued_handler : file_queued_function,<br>
file_queue_error_handler : file_queue_error_function,<br>
file_dialog_complete_handler : file_dialog_complete_function,<br>
upload_start_handler : upload_start_function,<br>
upload_progress_handler : upload_progress_function,<br>
upload_error_handler : upload_error_function,<br>
upload_success_handler : upload_success_function,<br>
upload_complete_handler : upload_complete_function,<br>
upload_success_all:function(){}<br>
};<br>
var 结果=$.extend({},settings_object,options);<br>
返回结果；<br>
};<br>
this.initswf(this);<br>
};<br>
$.addAllParam=函数(选项,_callback){<br>
if($.jsonLength(options)>0){<br>
var len = $.getobjlength();<br>
for(var i=0;i<len;i++){<br />
var options = $.extend({},options,CYSUPLOAD[i].settings.post_params);<br />
CYSUPLOAD[i].setPostParams(options);<br />
}<br />
}<br />
if(typeof(_callback)=="function"){<br />
_callback();<br />
}<br />
}<br />
$.jsonLength=function(_json){<br />
var len = 0;<br />
for(p in _json){<br />
len++;<br />
}<br />
return len;<br />
}<br />
$.rand = function getRandom(n){<br />
function S4() {<br />
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);<br />
}<br />
return (S4()+S4()+"_"+S4()+"_"+S4()+"_"+S4()+"_"+S4()+S4()+S4());<br />
}<br />
//type 1进度条模式，2提示模式<br />
$.process=function(options){<br />
var settings_object={<br />
pcolor:"#CDFEAD",<br />
pbgcolor:"#47AE02",<br />
tcolor:"#D0EBFD",<br />
tbgcolor:"#055387",<br />
floatid:CYSUPLOAD[options.cid].settings.Idname,<br />
appendObj:CYSUPLOAD[options.cid].settings.Cobj,<br />
name:"fileprocess_"+options.cid,<br />
type:1,<br />
msg:"",<br />
process_tag:"/",<br />
process_bai:true,<br />
process_bytes:true,<br />
bytes_compeled:0,<br />
bytes_total:0,<br />
total_files:0,<br />
now_file_id:0,<br />
compele_files:0,<br />
select_files:0<br />
}<br />
settings_object=$.extend({},settings_object,options);<br />
var bgCLname = 'process_bg'+settings_object.cid;<br />
var qbgCLname= 'process_qbg'+settings_object.cid;<br />
var process_html="<div class='"+settings_object.name+"' id='"+settings_object.name+"'></div>";<br>
var process_bg ="<div class='"+bgCLname+"'></div>";<br>
var process_qbg ="<div class='"+qbgCLname+"'></div>”;<br>
if($("#" settings_object.name).length>0){<br>
$("#" settings_object.name).remove();<br>
if($("." bgCLname).length>0||$("." qbgCLname).length){<br>
$("." bgCLname).remove();<br>
$("." qbgCLname).remove();<br>
}<br>
}<br>
var apendObj = settings_object.appendObj;<br>
$(process_html).appendTo(apendObj);<br>
$(process_bg).appendTo(apendObj);<br>
$(process_qbg).appendTo(apendObj);<br>
apendObj.css({<br>
位置：“相对”<br>
});<br>
var floatobj = $("#" settings_object.floatid);<br>
var_w=floatobj.innerWidth();<br>
var_h=floatobj.innerHeight();<br>
var top=floatobj.css("边框顶部宽度");<br>
var left=floatobj.css("border-left-width");<br>
if(settings_object.type==1){<br>
var_ts=settings_object.total_files;<br>
var_bc=settings_object.bytes_compeled;<br>
var _bt = settings_object.bytes_total;<br>
var_cf=settings_object.compele_files;<br>
<br>
var one_util_width = Math.ceil((_w*100)/(_ts*100));<br>
var now_width = one_util_width*_cf;<br>
var next_width = Math.ceil((_bc*100)/(_bt*100))*one_util_width;<br>
next_width = next_width now_width;<br>
if(next_width>=_w){<br>
next_width=_w;<br>
}<br>
$("#" settings_object.name).css({<br>
颜色：settings_object.pcolor，<br>
背景：settings_object.pbgcolor，<br>
"文本对齐":"居中",<br>
宽度：now_width“px”，<br>
高度：_h“px”，<br>
“行高”：_h“px”，<br>
位置：“绝对”，<br>
顶部：顶部，<br>
左：左，<br>
“z-index”：3<br>
});<br>
$("." bgCLname).css({<br>
颜色：settings_object.pcolor，<br>
背景：“#5B5A4E”，<br>
"文本对齐":"居中",<br>
宽度：_w“px”，<br>
高度：_h“px”，<br>
“行高”：_h“px”，<br>
位置：“绝对”，<br>
顶部：顶部，<br> 左：左，<br>
“z-index”：2<br>
});<br>
$("." qbgCLname).css({<br>
颜色：settings_object.pcolor，<br>
背景：“透明”，<br>
"文本对齐":"居中",<br>
宽度：_w“px”，<br>
高度：_h“px”，<br>
“行高”：_h“px”，<br>
位置：“绝对”，<br>
顶部：顶部，<br>
左：左，<br>
“z-index”：4<br>
});<br>
settings_object.msg="";<br>
if(settings_object.process_bai){<br>
if(_ts>1){<br>
var 百分比=(_cf*100)/(_ts*100)*100;<br>
}其他{<br>
var 百分比=(_bc*100)/(_bt*100)*100;<br>
}<br>
settings_object.msg =parseFloat(percent).toFixed(2);<br>
settings_object.msg =" %,";<br>
if((_cf 1)
settings_object.msg ="正在上传第一个" (_cf 1) "个文件[" _bc "/" _bt "]";<br>
}其他{<br>
settings_object.msg ="正在上传第一个" (_cf) "个文件[" _bc "/" _bt "]";<br>
}<br>
if(_ts==(_cf 1)&&_bc==_bt){<br>
settings_object.msg="已上传完毕！";<br>
}<br>
}<br>
$("#" settings_object.name).stop(true,true).animate({width:next_width},300);<br>
$("." qbgCLname).html(settings_object.msg);<br>
<br>
}else if(settings_object.type==2){<br>
$("#" settings_object.name).css({<br>
颜色：settings_object.tcolor，<br>
背景：settings_object.tbgcolor，<br>
"文本对齐":"居中",<br>
宽度：_w“px”，<br>
高度：_h“px”，<br>
“行高”：_h“px”，<br>
位置：“绝对”，<br>
顶部：顶部，<br>
左：左，<br> “z-index”：3<br>
});<br>
$("#" settings_object.name).html(settings_object.msg);<br>
}<br>
}<br>
$.getobjlength=function(){<br>
var len = parseInt(CYSUPLOAD.length);<br>
返回 len;<br>
};<br>
<br>
$._nullcheck=函数(_index){<br>
if(CYSUPLOAD[_index].select_num=="0"||CYSUPLOAD[_index].select_num==0||typeof(CYSUPLOAD[_index].select_num)=="未定义"){<br>
var _msg = “亲爱的，至少放点东西在我里面”;<br>
$.process({type:2,tcolor:"#FFB9B9",tbgcolor:"#990000",msg:_msg,cid:_index});<br>
返回 false；<br>
}其他{<br>
返回 true；<br>
}<br>
}<br>
<br>
$.nullcheck = function(_obj){<br>
var_null = true;<br>
if(_obj.length>0){<br>
_obj.each(函数(i){<br>
if(!$._nullcheck(i)){<br>
_null = false;<br>
}<br>
});<br>
}<br>
返回_null;<br>
}<br>
<br>
$.doUpload=function(){<br>
CYSUPLOAD[0].startUpload();<br>
}<br>
<br>
$.errorMsg = 函数（代码）{<br>
if(code
返回 false；<br>
}其他{<br>
返回 true；<br>
}<br>
}<br>
})(jQuery);<br>
//确实是影片加载之后调用的<br>
函数 swfupload_loaded_function(){<br>
<br>
}<br>
//弹出文件选择框之前的句柄捕获<br>
函数 file_dialog_start_function(){<br>
CYSUPLOAD[this.settings.cid].cancelQueue();<br>
}<br>
<br>
//队列句柄捕获，当一个文件被加入进去的事件时触发，多次调用！<br>
函数 file_queued_function(file){<br>
<br>
}<br>
//当文件添加到上传队列失败时触发此事件，失败的原因可能是文件大小超过了您允许的数值、文件是空的或者文件队列已经满员了等。<br>
函数 file_queue_error_function(file,errmsg){<br>
CYSUPLOAD[this.settings.cid].error=errmsg;<br>
var code = errmsg*-1;<br>
if(代码==100){<br>
var _msg = "亲爱的，本插件只允许" CYSUPLOAD[this.settings.cid].settings.file_queue_limit "个同时插入噢！";<br>
}否则 if(code==130){<br>
var _msg = “亲爱的，本插件只允许图片文件的插入哦！”;<br>
}否则 if(代码==110){<br>
var _msg = “亲爱的，你感应人家那里的东西很巧”;<br>
}否则 if(代码==120){<br>
var _msg = “亲爱的，你的东西太小了，本插件没有普遍的存在”;<br>
}<br>
$.process({type:2,tcolor:"#FFB9B9",tbgcolor:"#990000",msg:_msg,cid:this.settings.cid});<br>
}<br>
//当文件已经不多了，处理后（指添加到上传队列），会立即触发事件。可以在该事件中调用this.startUpload()方法来实现文件的自动上传<br>
//参数select_num指本次在文件中有一些框里有一些文件数量<br>
//参数queued_num指本次被添加到上传队列的文件数量<br>
//参数queued_total_num指当前上传队列里共有多少个文件（包括了本次添加队列的文件）<br>
函数 file_dialog_complete_function(select_num,queued_num){<br>
CYSUPLOAD[this.settings.cid].select_num = select_num;<br> if(select_num>0){<br>
var _msg = "选择了" select_num "个文件";<br>
$.process({type:2,select_files:select_num,msg:_msg,cid:this.settings.cid});<br>
}else{<br>
var _msg = "你没有选择任何文件！";<br>
$.process({type:2,tcolor:"#FFB9B9",tbgcolor:"#990000",select_files:select_num,msg:_msg,cid:this.settings.cid});<br>
}<br>
<br>
}<br>
//当文件即将上传时会触发该事件,该事件给了你在文件上传前的最后一次机会来验证文件信息、<br>
//增加要随之上传的附加信息或做其他工作。可以通过返回false来取消本次文件的上传<br>
function upload_start_function(file){<br>
<br>
}<br>
//该事件会在文件的上传过程中反复触发，可以利用该事件来实现上传进度条<br>
//参数file为文件信息对象<br>
//参数completebytes为当前已上传的字节数<br>
//参数totalbytes为文件总的字节数<br>
function upload_progress_function(file,completebytes,totalbytes){<br>
var status = CYSUPLOAD[this.settings.cid].getStats();<br>
var a1 = parseInt(status.files_queued);<br>
var a2 = parseInt(status.successful_uploads);<br>
var a3 = parseInt(status.upload_errors);<br>
var totalsfiles = a1 a2 a3;<br>
$.process({<br>
now_file_id:file.id,<br>
total_files:totalsfiles,<br>
compele_files:a2,<br>
bytes_compeled:completebytes,<br>
bytes_total:totalbytes,cid:this.settings.cid<br>
});<br>
}<br>
//文件上传被中断或是文件没有成功上传时会触发该事件。停止、取消文件上传或是在uploadStart事件中返回false都会引发这个事件，<br>
//但是如果某个文件被取消了但仍然还在队列中则不会触发该事件<br>
//参数file为文件信息对象<br>
//参数error_code为错误代码，具体的可参照SWFUpload.UPLOAD_ERROR中定义的常量<br>
function upload_error_function(file,error_code){<br>
<br>
}<br>
//当一个文件上传成功后会触发该事件<br>
//参数file为文件信息对象<br>
//参数server_data为服务器端输出的数据<br>
function upload_success_function(file,server_data){<br>
if(typeof(CYSUPLOAD[this.settings.cid].settings.upload_success_one)=="function"){<br>
CYSUPLOAD[this.settings.cid].settings.upload_success_one(server_data);<br>
}<br>
}<br>
//当一次文件上传的流程完成时（不管是成功的还是不成功的）会触发该事件，该事件表明本次上传已经完成，<br>
//上传队列里的下一个文件可以开始上传了。该事件发生后队列中下一个文件的上传将会开始<br>
function upload_complete_function(file){<br>
var _index = this.settings.cid;<br>
if (this.getStats().files_queued === 0) {<br>
if(_index==($.getobjlength()-1)){<br>
upload_all_complete();<br>
}else{<br>
var _next = _index 1;<br>
CYSUPLOAD[_next].startUpload();<br>
}<br>
} else { <br>
CYSUPLOAD[_index].startUpload();<br>
}<br>
}<br>
<br>
//当所有文件都上传成功之后<br>
function upload_all_complete(){<br>
if(typeof(CYSUPLOAD[0].settings.upload_success_all)=="function"){<br>
CYSUPLOAD[0].settings.upload_success_all();<br>
}<br>}
AD：真正免费，域名 虚机 企业邮箱=0元