开始实现上传多图，使用的方法是input=file，然后name等于数组，这样的确可以实现多图上传，处理多图的方法还借鉴了php 多图片上传 【原创】，但是这样仅仅是把图片上传到服务器，本地不可以预览，不可以编辑，功能稍微弱了一点；于是乎，找到了kindeditor编辑器，用了它的一个多图上传的组件，使用的方法很简单：
把包解压到指定位置，在页面引入一个css样式文件，一个主要的js文件，一个语言包，注意路径：
<link rel="stylesheet" href="./kindeditor/themes/default/default.css" />
<script src="./kindeditor/kindeditor.js"></script>
<script src="./kindeditor/lang/zh_CN.js"></script>
页面添加input按钮，再指定一块区域作为图片预览的位置，源码来自官网：
<input type="button" id="J_selectImage" value="批量上传" /> //出发按钮
<div id="J_imageView"></div> //预览图片的位置
<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('<img src="' + data.url + '">'); //data.url是图片上传之后返回的url
});
editor.hideDialog();
}
});
});
});
});
</script>
使用效果如图:
选择图片
上传之后的预览
到这里，还只是一个普通的可预览的上传多图，而在实际的项目里，我想要的效果则是可编辑，并且为多图绑定一个集合；于是乎，又借鉴了phpcms里面上传多图的思路：就是在把图片集合上传到服务器的时候，只是把图片的url地址绑定在一起，而不用管图片实体的具体位置，必要的时候，这张图片也可以分配到别的集合；于是乎，直接修改上传图片的回调函数:
K.each(urlList, function(i, data) {
div.append('<div class="pic-item"><img src="' + data.url + '" alt="" width="200" height="200"><input type="text" name="multi-pic[]" value="' + data.url + '"><span class="remove-pic-item">X</span></div>'); //大致就是这样的结构
});
//需要在<div id="J_imageView"></div>外部或内部嵌套一个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相比，功能更精简，更易用（个人感受）