Kindeditor upload multiple graphs and support preview and edit function

Start to upload multiple maps, the use of the method is Input=file, and then name is equal to the array, so it is true to upload multiple graphs, processing multiple graphs of the method also borrowed a lot of PHP upload "original", but this is just upload the picture to the server, local can not preview, can not edit, The function is a little bit weaker; So, found the Kindeditor editor, with its multiple map upload components, the method is simple:

Unzip the package to the specified location, introduce a CSS style file on the page, a major JS file, a language pack, and note the path:

<link rel= "stylesheet" href= "/kindeditor/themes/default/default.css"/>
<script src= "./kindeditor/kindeditor.js" ></script>
<script src= "./kindeditor/lang/zh_cn.js" ></script>

Page to add the input button, and then specify an area as a picture preview location, source code from the official website:

<input type= "button" id= "J_selectimage" value= "bulk upload"/>//Departure button
<div id= "J_imageview" ></div>//Preview Picture location

<script>
Kindeditor.ready (function (K) {
var editor = K.editor ({
Allowfilemanager:true//Open multiple file uploads
});
K (' #J_selectImage '). Click (function () {
Editor.loadplugin (' Multiimage ', function () {
Editor.plugin.multiImageDialog ({
Clickfn:function (urllist) {
var div = K (' #J_imageView ');
Div.html ("); This line will be removed, affecting the style in the picture preview box
K.each (urllist, function (i, data) {
Div.append (' '); Data.url is the URL that is returned after the image is uploaded
});
Editor.hidedialog ();
}
});
});
});
});
</script>

Use the effect as shown:

Select picture

Post-upload preview

Here, it's just a normal, predictable upload of multiple graphs, and in the actual project, I want the effect is editable, and for the multiple map binding a set, and then, and learn from the Phpcms upload multiple graphics ideas: is in the collection of images uploaded to the server, Just bind the URL of the image to the location of the image, without the specific position of the picture entity, and the picture can be assigned to another collection when necessary, so directly modify the callback function of the uploaded image:

K.each (urllist, function (i, data) {
Div.append (' <div class= "Pic-item" ><input type = "text" name= "multi-pic[]" "value=" ' + Data.url + ' "><span class=" Remove-pic-item ">X</span></div> '); This is roughly the structure.
});

You need to nest a form form within the <div id= "J_imageview" ></div> outside or inside
In fact, the image of the address as a text array, and then through the form table conveys to the server

So the foreground in the upload picture not only can preview, also can edit (through jquery, point X to remove the current picture and the input box from the DOM)

multiple pictures upload PHP version

if (isset ($_files[' image ')) && $_files[' image ' [' name ']] {
$file = $_files[' image '];
$num = count ($_files[' image '] [' name ']); Calculate the number of uploaded pictures
Working with arrays
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 '); Returns the name value after uploading the picture
}
$info [' image '] = serialize ($img); Serializing an array of stored databases
$conn->insert (' Maintenance ', $info);
}

OK, finally achieved the desired effect, although not very perfect. The use of Kindeditor as a rich text editor is also relatively good, it and ueditor compared to the function is more concise, easier to use (personal experience)