kindeditor上传漏洞_kindeditor上传多图并且支持预览与编辑功能

更新时间:2019-12-26    来源:邮件处理    手机版     字体:

【www.bbyears.com--邮件处理】

开始实现上传多图,使用的方法是input=file,然后name等于数组,这样的确可以实现多图上传,处理多图的方法还借鉴了php 多图片上传 【原创】,但是这样仅仅是把图片上传到服务器,本地不可以预览,不可以编辑,功能稍微弱了一点;于是乎,找到了kindeditor编辑器,用了它的一个多图上传的组件,使用的方法很简单:

把包解压到指定位置,在页面引入一个css样式文件,一个主要的js文件,一个语言包,注意路径:


 <script src="./kindeditor/kindeditor.js"></script>
 <script src="./kindeditor/lang/zh_CN.js"></script>

页面添加input按钮,再指定一块区域作为图片预览的位置,源码来自官网:


//出发按钮
  //预览图片的位置

<script>
    KindEditor.ready(function(K) {
        var editor = K.editor({
            allowFileManager : true  //开启多文件上传
        });
        K("#J_selectImage").click(function() {
            editor.loadPlugin("multiimage", function() {
                editor.plugin.multiImageDialog({
                    clickFn : function(urlList) {
                        var div = K("#J_imageView");
                        //div.html("");  //这行要去掉,会影响图片预览框内的样式
                        K.each(urlList, function(i, data) {
                            div.append("");  //data.url是图片上传之后返回的url
                        });
                        editor.hideDialog();
                    }
                });
            });
        });
    });
</script>

使用效果如图:

 

QQ截图20150819195228 QQ截图20150819195531选择图片 QQ截图20150819195335上传之后的预览


到这里,还只是一个普通的可预览的上传多图,而在实际的项目里,我想要的效果则是可编辑,并且为多图绑定一个集合;于是乎,又借鉴了phpcms里面上传多图的思路:就是在把图片集合上传到服务器的时候,只是把图片的url地址绑定在一起,而不用管图片实体的具体位置,必要的时候,这张图片也可以分配到别的集合;于是乎,直接修改上传图片的回调函数:

K.each(urlList, function(i, data) {
div.append("X"); //大致就是这样的结构
});
 
//需要在外部或内部嵌套一个form表单
其实就是把图片的地址再作为一个text数组,再通过form表单传至服务器

 QQ截图20150819202027

这样前台在上传图片不仅可以预览,也可以编辑(通过jquery,点X把当前的图片和input框从dom删除)


多图片上传php版本

if (isset($_FILES["image"]) &&  $_FILES["image"]["name"]) {
  $file = $_FILES["image"];
  $num = count ($_FILES["image"]["name"]); //计算上传的图片数量
  // 处理数组
  for ($i=0;$i < $num;$i++) {
    $data[$i]["name"] = $file["name"][$i];
    $data[$i]["type"] = $file["type"][$i];
    $data[$i]["tmp_name"] = $file["tmp_name"][$i];
    $data[$i]["error"] = $file["error"][$i];
    $data[$i]["size"] = $file["size"][$i];
  }
  foreach ($data as $key => $val) {
    $_FILES["image"] = $val;
    $img[$key] = $this-> fileUpload("image"); //上传图片后返回name值
  }
  $info["image"] = serialize($img);   // 序列化数组存数据库
  $conn->insert("maintenance", $info);
}

ok,总算实现了想要的效果,虽然还不是很完美。使用kindeditor作为富文本编辑器也还是比较不错的,它和ueditor相比,功能更精简,更易用(个人感受)

本文来源:http://www.bbyears.com/jiaocheng/83898.html

热门标签

更多>>

本类排行