ckeditor批量上传图片（下）

在前篇博文中关于ckeditor批量上传图片讲解了如何添加一个插件，但是还没有上传图片的功能，现在，且简单讲讲如何实现这个功能！
这个功能的实现主要依赖于image.html和image_upload.php文件，这需要你在相关目录添加这两个文件（目录位置可参考上篇博文《ckeditor批量上传图片（上）》）！

• image.html
  这个html是父html通过iframe加载的一个子html，这里需要访问到资源JqueryFileUpload，主要是jquery.ui.widget.js和jquery.fileupload.js。这个文件的功能主要有两个：一是加载图片上传区的模板样式，似下图：

二是触发图片上传事件，贴一下该文件中图片上传功能的关键代码：

$("#fileupload_input_color").fileupload({            url: "js/ckeditor/plugins/multiimg/dialogs/image_upload.php",             async: false,            add: function (e, data) {                data.submit();            },            done: function (e, data) {                data = JSON.parse(data.result);                if (data.result == "200") {                    parent.top.imgs.push(data.imgurl);                    $("#button-color-field").append("<span class='thumbnail'><img width='100%' alt='' src='" + data.imgurl + "'><input name='product_color_img_ipnut' type='hidden' value='" + data.imgurl + "' /></span>");                } else {                    alert(data.msg);                }            }        });

说明：注意代码 parent.top.imgs.push(data.imgurl) 这里是实现父子html之间的通信，因为你上传的图片需要在ckeditor的编辑区内显示，因此需要将选择的图片的url信息传递回父html，其中，imgs是父html中定义的一个全局变量，像这样：

<textarea class="ckeditor" name="editor1" id="" cols="30" rows="10"></textarea><script>    var imgs = [];</script>

• image_upload.php
  这个文件是用php写的，但是不影响你后台语言的选择！里面是图片上传的逻辑，包括：可上传文件的格式、寻找或创建上传文件的存储目录以及判断选择文件是否存在等，最后是返回选择文件的url地址信息。

批量传图的整个插件文件资源下载链接：http://download.csdn.net/detail/qiudw_01/9024685，直接看demo~