Kindeditor upload multiple graphs and support preview and edit function

Source: Internet
Author: User
Tags upload php

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

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 ();

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.