最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
kindeditor上传多图并且支持预览与编辑功能
时间:2015-08-21 编辑:简简单单 来源:一聚教程网
开始实现上传多图,使用的方法是input=file,然后name等于数组,这样的确可以实现多图上传,处理多图的方法还借鉴了php 多图片上传 【原创】,但是这样仅仅是把图片上传到服务器,本地不可以预览,不可以编辑,功能稍微弱了一点;于是乎,找到了kindeditor编辑器,用了它的一个多图上传的组件,使用的方法很简单:
把包解压到指定位置,在页面引入一个css样式文件,一个主要的js文件,一个语言包,注意路径:
页面添加input按钮,再指定一块区域作为图片预览的位置,源码来自官网:
selectImage" value="批量上传" /> //出发按钮
使用效果如图:
到这里,还只是一个普通的可预览的上传多图,而在实际的项目里,我想要的效果则是可编辑,并且为多图绑定一个集合;于是乎,又借鉴了phpcms里面上传多图的思路:就是在把图片集合上传到服务器的时候,只是把图片的url地址绑定在一起,而不用管图片实体的具体位置,必要的时候,这张图片也可以分配到别的集合;于是乎,直接修改上传图片的回调函数:
K.each(urlList, function(i, data) {
div.append('
});
//需要在外部或内部嵌套一个form表单
其实就是把图片的地址再作为一个text数组,再通过form表单传至服务器
这样前台在上传图片不仅可以预览,也可以编辑(通过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相比,功能更精简,更易用(个人感受)
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31