感谢本文作者
昵称：牧羊人
加入时间： 0:00:00
这家伙很懒，虾米都没写
以下内容也很赞哦提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
ckeditor添加自定义按钮整合swfupload实现批量上传图片
导读：给ckeditor添加自定义按钮，由于ckeditor只能上传一张图片，如果要上传多张图片就要结合ckfinder，而ckfinder是收费的，所以就想通过自定义
给ckeditor添加自定义按钮，由于ckeditor只能上传一张图片，如果要上传多张图片就要结合ckfinder，而ckfinder是收费的，所以就想通过自定义按钮整合swfupload实现一次上传多张图片的功能
1、首先并ckeditor。
2、下载swfupload解压拷贝到对应的文件目录下
3、自定义工具栏按钮:
我们可以自定义ckeditor工具栏要显示的按钮，工具栏按钮定义可以参考。
现在我们需要向工具栏添加一个自定义功能的按钮。ckeditor工具栏中的每个按钮都是作为插件定义在ckeditor\plugins\&目录中。我们在ckeditor\plugins\中创建一个新文件夹imagedef。在imagedef文件夹内，我们创建一个plugin.js文件，它的代码如下：
CKEDITOR.plugins.add(
&&&&&imagedef&,
& &&&&&&&&requires:[&dialog&],&//当按钮触发时弹出对话框
&&&&&&&&init:function&(a)
& &&&&&&&&{
&&&&&&&&&&&&a.addCommand(&imagedef&,&new&CKEDITOR.dialogCommand(&imagedef&));
& &&&&&&&&&&&&a.ui.addButton(
&&&&&&&&&&&&&&&&&Imagedef&,
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&label:&图片&,
&&&&&&&&&&&&&&&&&&&&command:&imagedef&,
&&&&&&&&&&&&&&&&&&&&icon:this.path&+&&imagedef.gif&
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&CKEDITOR.dialog.add(&imagedef&,&this.path&+&&dialogs/imagedef.js&);
在上面的代码中我们指定自定义按钮的图标imagedef.gif，imagedef.gif放在imagedef文件夹中。
在imagedef文件夹下新建一个dialogs目录，在dialogs目录下新建一个imagedef.js文件，就是上面代码调用的imagedef.js文件
CKEDITOR.dialog.add(
&&&&&imagedef&,
& &&&&function&(b)
&&&&&&&&return&{
&&&&&&&& title:&图片&,
&&&&&&&&&&&&&&&&&&&minWidth:590,
& &&&&&&&&&&&&minHeight:300,
&&&&&&&&&&&&contents:[{
&&&&&&&&&&&&&&&&&&&&id:&tab1&,
& &&&&&&&&&&&&&&&&&&&&label:&&,
&&&&&&&&&&&&&&&&&&&&title:&&,
&&&&&&&&&&&&&&&&&&&&expand:true,
& &&&&&&&&&&&&&&&&&&&&padding:0,
&&&&&&&&&&&&&&&&&&&&elements:[{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&type:&html&,
& &&&&&&&&&&&&&&&&&&&&&&&&&&&&html:initImageDlgInnerHtml()&//对话框中要显示的内容，这里的代码将发在下面
& &&&&&&&&&&&&&&&&&&&&}]
& &&&&&&&&&&&&}],
&&&&&&&&&&&&onOk:&function(){&//对话框点击确定的时候调用该函数
&&&&&&&&&&&& var&D&=&
&&&&&&&&&&&& var&imes&=&getCkUploadImages();//获取上传的图片，用于取路径，将图片显示在富文本编辑框中
&&&&&&&&&&&& $(imes).each(function(){
&&&&&&&&&&&& D.imageElement&=&b.document.createElement('img');
D.imageElement.setAttribute('alt',&'');
D.imageElement.setAttribute('_cke_saved_src',&$(this).attr(&src&));
D.imageElement.setAttribute('src',&$(this).attr(&src&));
D.commitContent(1,&D.imageElement);
if&(!D.imageElement.getAttribute('style')){
D.imageElement.removeAttribute('style');
b.insertElement(D.imageElement);
&&&&&&&&&&&& });
&&&&&&&&&&&&},
&&&&&&&& onLoad:&function(){&//对话框初始化时调用
&&&&&&&& initEventImageUpload();&//用于注册上传swfupload组件
&&&&&&&& },
&&&&&&&& onShow:function(){
&&&&&&&& clearCkImageUpload();&//在对话框显示时作一些特殊处理
&&&&&&&& }
& &&&&&&&&};
接下来我们需要注册imagedef插件。原文中的给出方法是在ckeditor.js中注册，这会使以后升级新版本遇到困难。提倡使用下面的方法在config.js中注册自定义插件：
CKEDITOR.editorConfig&=&function(&config&)
&&&&config.toolbar_Full&=&[&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&
&&&&&&&&&&&&&&['Source','Preview','-','Templates'],
&&&&&&&&&&&&&&['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print',&'SpellChecker',&'Scayt'],
&&&&&&&&&&&&&&&&&&&&&['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
&&&&&&&&&&&&&&['Form',&'Checkbox',&'Radio',&'TextField',&'Textarea',&'Select',&'Button',&'ImageButton',&'HiddenField'],
&&&&&&&&&&&&&&&&&&&&&&'/',
&&&&&&&&&&&&&&&&&&&&&&&['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
&&&&&&&&&&&&&&&&&&&&&&&['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
&&&&&&&&&&&&&&&&&&&&&&&['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
&&&&&&&&&&&&&&&&&&&&&&&['Link','Unlink','Anchor'],
&&&&&&&&&&&&&&&&&&&&&&&['Imagedef','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
&&&&&&&&&&&&&&&&&&&&&&&'/',
&&&&&&&&&&&&&&&&&&&&&&&['Styles','Format','Font','FontSize'],
&&&&&&&&&&&&&&&&&&&&&&&['TextColor','BGColor']
&&&&&&&&&&&&&&&&&&&&&&];
config.resize_maxWidth&=&775;
config.removePlugins='elementspath';//去掉文本框下面出现body&p&等
config.extraPlugins=&imagedef&;&//注册自定义按钮
最后，在ckeditor中显示自定义按钮linkbutton，代码如下：
下面代码是在页面上写的，当然可以根据自己的需求来定，写在什么位置
//编辑框初始化上传图片的回调----------自定义按钮插件
function&initImageDlgInnerHtml(){&//这是在对话框中要显示的内容
var&iHtml&=&&&div&style='float:width:100%'&上传到服务器上&/div&&&;
iHtml&+=&&&div&style='float:width:100%;'&class='setUpload'&&;
iHtml&+=&&&div&style='float:height:24width:82px'&class='su_img'&&span&id='ck_btn_id'&dssdf&/span&&/div&&;
iHtml&+=&&&div&style='float:left'&id='ck_fs_upload_progress'&未选择文件&/div&&;
iHtml&+=&&&/div&&;
iHtml&+=&&&div&style='float:width:100%'&&input&id='stop_id'&type='button'&vlaue='终止'/&&input&id='ck_btn_start'&class='cke_dialog_start_button_z'&type='button'&value='开始上传'&style='float:left'&onclick='ckUploadImageStart();'/&&/div&&;
iHtml&+=&&&div&id='ck_pic_div'&style='float:width:100%'&&/div&&;
上面有个cke_dialog_start_button_z样式是根据自己的需要来写的
function&initEventImageUpload(){&//对上传控件的注册
ckeditorInitSwfu(&ck_fs_upload_progress&,&stop_id&,&ck_btn_id&);
$(&#ck_fs_upload_progress&).parent().find(&object&).css({&height&:&24px&,&width&:&82px&});
$(&#ck_btn_start&).mouseover(function(){
$(this).css({&cursor&:&hand&,&background-position&:&0&-1179px&});
function&clearCkImageUpload(){&//对对话框弹出时作特殊处理
if($(&#ck_fs_upload_progress&).html().indexOf(&.jpg&)&!=&-1){
$(&#ck_fs_upload_progress&).html(&&);
$(&#ck_pic_div&).html(&&);
function&getCkUploadImages(){
return&$(&#ck_pic_div&).find(&img&);
var&ckS&//初始化上传控件
function&ckeditorInitSwfu(progress,btn,spanButtonPlaceHolder)&{
var&uploadUrl&=&&${BasePath}/commodity_com/img/uploadCommodityImg.ihtml?type=1&;
//在firefox、chrome下，上传不能保留登录信息，所以必须加上jsessionid。
var&jsessionid&=&$.cookie(&JSESSIONID&);
if(jsessionid)&{
uploadUrl&+=&&?jsessionid=&+
ckSwfu=new&SWFUpload({
upload_url&:&uploadUrl,
flash_url&:&&${BasePath}/res/base/plugin/swfupload/swfupload.swf&,
file_size_limit&:&&4&MB&,
file_types&:&&*.*.*.*.*.bmp&,
file_types_description&:&&Web&Image&Files&,
file_queue_limit&:&0,
custom_settings&:&{
progressTarget&:&progress,
cancelButtonId&:&btn
debug:&false,
button_image_url&:&&${BasePath}/res/base/plugin/swfupload/button_notext.png&,
button_placeholder_id&:&spanButtonPlaceHolder,
button_text:&&&span&class='btnText'&上传图片&/span&&,
button_width:&81,
button_height:&24,
button_text_top_padding:&2,
button_text_left_padding:&20,
button_text_style:&'.btnText{color:#666666;}',
button_cursor:SWFUpload.CURSOR.HAND,
file_queued_handler&:&fileQueuedCk,
file_queue_error_handler&:&fileQueueError,
file_dialog_complete_handler&:&fileDialogCompleteCk,
upload_start_handler&:&uploadStart,
upload_progress_handler&:&uploadProgress,
upload_error_handler&:&uploadError,
upload_success_handler&:&uploadSuccessCk,
upload_complete_handler&:&uploadComplete,
queue_complete_handler&:&queueComplete
//开始上传图片
function&ckUploadImageStart(obj){
ckSwfu.startUpload();
//回调重写
function&fileQueuedCk(file)&{
if($(&#ck_fs_upload_progress&).html().indexOf(&.jpg&)&==&-1){
$(&#ck_fs_upload_progress&).html(&&);
var&progress&=&new&FileProgress(file,&this.customSettings.progressTarget);
progress.setStatus(&Pending...&);
progress.toggleCancel(true,&this);
$(progress.fileProgressWrapper).css(&display&,&none&);
$(&#ck_fs_upload_progress&).append(&&&+file.name);
}&catch&(ex)&{
this.debug(ex);
//回调重写，上传成功后
function&uploadSuccessCk(file,&serverData)&{
var&progress&=&new&FileProgress(file,&swfu.customSettings.progressTarget);
//progress.setComplete();
//progress.setStatus(&上传成功！&);
//progress.toggleCancel(false);
$(progress.fileProgressWrapper).css(&display&,&none&);
var&json&=&eval(&(&+serverData+&)&);
var&img&=&'&div&style=&float:&&&img&picUrl=&'+json.url+'&&src=&${BasePath!''}/'+json.url+'&&style=&width:80height:80px&/&&a&href=&javascript：void(0)&&onclick=&deletePic(this)&&X&/a&&/div&';
$(&#ck_pic_div&).append(img);
$(&#ck_pic_div&).dragsort(&destroy&);&//图片排序，这里要下载dragsort插件
$(&#ck_pic_div&).dragsort({&dragSelector:&&div&,&dragBetween:&true,&placeHolderTemplate:&&&div&class='placeHolder'&style='float:left'&&img&/&&a&&/a&&/div&&&});
}&catch&(ex)&{
//回调重写，主要是设置参数，如果需要的参数没有，就清空上传的文件，为了解决下次选择会上传没有参数时的图片
function&fileDialogCompleteCk(numFilesSelected,&numFilesQueued)&{
var&commoNo&=&$(&#commoNo&).val();
&& var&brandNo&=&$(&#brand&option:selected&).val();
&& var&catNo&=&$(&#thirdCommon&option:selected&).val();
&& //初始化上传图片
&& if(brandNo&!=&&&&&&&commoNo&!=&&&&&&&catNo&!=&&&)&{
&& this.addPostParam(&commoNo&,commoNo);
&& this.addPostParam(&thirdCatNo&,catNo);
&& this.addPostParam(&brandNo&,brandNo);
&& if&(numFilesSelected&&&0)&{
document.getElementById(this.customSettings.cancelButtonId).disabled&=&
&& }&else&{
&& for(var&i=0;i&numFilesSi++){
&& var&promitId&=&this.customSettings.progressT
&& $(&#&+promitId).find(&*&).remove();
&& var&fileId&=&this.getFile().
&& this.cancelUpload(fileId,false);
&& $(&#ck_fs_upload_progress&).html(&&);
&& alert(&请选择分类和品牌！&);
}&catch&(ex)&&{
&&&&&&&&this.debug(ex);
转载请注明（B5教程网）原文链接：
网友评论：用SWFUpload做上传，这个页面需要多个上传按钮，怎么实现？
[问题点数：50分，结帖人abina]
用SWFUpload做上传，这个页面需要多个上传按钮，怎么实现？
[问题点数：50分，结帖人abina]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2012年3月 总版技术专家分月排行榜第一
2013年7月 荣获微软MVP称号
2012年2月 挨踢职涯大版内专家分月排行榜第三2011年11月 挨踢职涯大版内专家分月排行榜第三2011年10月 挨踢职涯大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。jquery swfupload图片上传插件制作图片批量上传和单个图片上传代码
下载本地请在（localhost目录下访问）要运行upload.php文件。本地演示上传会正常。服务器上由于考虑到上传安全问题，部分不能正常演示。
下载资源：1602次
下载积分：60分
本站评论功能暂时取消，后续此功能例行通知。
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
下载该资源用户也下载了
未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口}