kindeditor 上传控件



    thinkphp 有一个扩展类,该类在上传的时候的确不错,很多参数可以修改,但是如果要配合到前

端一些jquery特效的时候,个人感觉有点耗时,然后就使用了kindeditor,这应该算是比较传统的文本

编辑器,现在新的新浪、百度等等的,不过每个文本编辑器使用方法都是差不多的。
    这次主要使用kindeditor实现上传本地图片、浏览服务器图片、批量上传图片的功能,这些案例在

kindeditor的官方网都能找到,但是总不能复制黏贴到项目上就能使用的(好的,废话不说了!)

    首先下载kindeditor的核心包,我将kindeditor的核心包放在./Public(位置随自己喜欢)。
    新建一个UploadController.class.php 内容如下

namespace Home\Controller;

class UploadController extends CommonController {

public function index(){
$php_path = $_SERVER['DOCUMENT_ROOT'].__ROOT__ . '/';
$php_url = __ROOT__ . '/';

//文件保存目录路径
$save_path = $php_path.'./uploads/';
//文件保存目录URL
$save_url = $php_url.'./uploads/';
//定义允许上传的文件扩展名
$ext_arr = array(
'image' => array('gif', 'jpg', 'jpeg', 'png', 

'bmp','GIF','JPG','JPEG','PNG','BMP'),
);
//最大文件大小
$max_size = 1000000;

$save_path = realpath($save_path) . '/';

//PHP上传失败
if (!empty($_FILES['imgFile']['error'])) {
switch($_FILES['imgFile']['error']){
case '1':
$error = '超过php.ini允许的大小。';
break;
case '2':
$error = '超过表单允许的大小。';
break;
case '3':
$error = '图片只有部分被上传。';
break;
case '4':
$error = '请选择图片。';
break;
case '6':
$error = '找不到临时目录。';
break;
case '7':
$error = '写文件到硬盘出错。';
break;
case '8':
$error = 'File upload stopped by extension。';
break;
case '999':
default:
$error = '未知错误。';
}
$this->alert($error);
}

//有上传文件时
if (empty($_FILES) === false) {
//原文件名
$file_name = $_FILES['imgFile']['name'];
//服务器上临时文件名
$tmp_name = $_FILES['imgFile']['tmp_name'];
//文件大小
$file_size = $_FILES['imgFile']['size'];
//检查文件名
if (!$file_name) {
$this->alert("请选择文件。");
}
//检查目录
if (@is_dir($save_path) === false) {
$this->alert("上传目录不存在。");
}
//检查目录写权限
if (@is_writable($save_path) === false) {
$this->alert("上传目录没有写权限。");
}
//检查是否已上传
if (@is_uploaded_file($tmp_name) === false) {
$this->alert("上传失败。");
}
//检查文件大小
if ($file_size > $max_size) {
$this->alert("上传文件大小超过限制。");
}
//检查目录名
$dir_name = empty($_GET['dir']) ? 'image' : trim($_GET['dir']);
if (empty($ext_arr[$dir_name])) {
$this->alert("目录名不正确。");
}
//获得文件扩展名
$temp_arr = explode(".", $file_name);
$file_ext = array_pop($temp_arr);
$file_ext = trim($file_ext);
$file_ext = strtolower($file_ext);
//检查扩展名
if (in_array($file_ext, $ext_arr[$dir_name]) === false) {
$this->alert("上传文件扩展名是不允许的扩展名。\n只允许" . 

implode(",", $ext_arr[$dir_name]) . "格式。");
}
//创建文件夹
// if ($dir_name !== '') {
// $save_path .= $dir_name . "/";
// $save_url .= $dir_name . "/";
// if (!file_exists($save_path)) {
// mkdir($save_path);
// }
// }
// $ymd = date("Ymd");
// $save_path .= $ymd . "/";
// $save_url .= $ymd . "/";
// if (!file_exists($save_path)) {
// mkdir($save_path);
// }
//新文件名
$new_file_name = date("YmdHis") . '_' . rand(10000, 99999) . '.' . 

$file_ext;
//移动文件
$file_path = $save_path . $new_file_name;
if (move_uploaded_file($tmp_name, $file_path) === false) {
$this->alert("上传文件失败。");
}
@chmod($file_path, 0644);
$file_url = $save_url . $new_file_name;

header('Content-type: text/html; charset=UTF-8');
require_once './Public/kindeditor/php/JSON.php';
$json = new \Services_JSON();
echo $json->encode(array('error' => 0, 'url' => $file_url));
exit;




}

public function filemanager(){

require_once './Public/kindeditor/php/JSON.php';

$php_path = dirname(__FILE__) . '/';
$php_url = dirname($_SERVER['PHP_SELF']) . '/';

//根目录路径,可以指定绝对路径,比如 /var/www/attached/
$root_path =  './uploads/';
//根目录URL,可以指定绝对路径,比如 http://www.yoursite.com/attached/
$root_url =  'http://'.$_SERVER['HTTP_HOST'].$php_url.'uploads/';
//图片扩展名
$ext_arr = array('gif', 'jpg', 'jpeg', 'png', 'bmp');

//目录名
$dir_name = empty($_GET['dir']) ? '' : trim($_GET['dir']);
// if (!in_array($dir_name, array('', 'image', 'flash', 'media', 'file'))) 

{
// echo "Invalid Directory name.";
// exit;
// }
// if ($dir_name !== '') {
// $root_path .= $dir_name . "/";
// $root_url .= $dir_name . "/";
// if (!file_exists($root_path)) {
// mkdir($root_path);
// }
// }

//根据path参数,设置各路径和URL
if (empty($_GET['path'])) {
$current_path = realpath($root_path) . '/';
$current_url = $root_url;
$current_dir_path = '';
$moveup_dir_path = '';
} else {
$current_path = realpath($root_path) . '/' . $_GET['path'];
$current_url = $root_url . $_GET['path'];
$current_dir_path = $_GET['path'];
$moveup_dir_path = preg_replace('/(.*?)[^\/]+\/$/', '$1', 

$current_dir_path);
}
//echo realpath($root_path);
//排序形式,name or size or type
$order = empty($_GET['order']) ? 'name' : strtolower($_GET['order']);

//不允许使用..移动到上一级目录
if (preg_match('/\.\./', $current_path)) {
echo 'Access is not allowed.';
exit;
}
//最后一个字符不是/
if (!preg_match('/\/$/', $current_path)) {
echo 'Parameter is not valid.';
exit;
}
//目录不存在或不是目录
if (!file_exists($current_path) || !is_dir($current_path)) {
echo 'Directory does not exist.';
exit;
}

//遍历目录取得文件信息
$file_list = array();
if ($handle = opendir($current_path)) {
$i = 0;
while (false !== ($filename = readdir($handle))) {
if ($filename{0} == '.') continue;
$file = $current_path . $filename;
if (is_dir($file)) {
$file_list[$i]['is_dir'] = true; //是否文件夹
$file_list[$i]['has_file'] = (count(scandir

($file)) > 2); //文件夹是否包含文件
$file_list[$i]['filesize'] = 0; //文件大小
$file_list[$i]['is_photo'] = false; //是否图片
$file_list[$i]['filetype'] = ''; //文件类别,用扩

展名判断
} else {
$file_list[$i]['is_dir'] = false;
$file_list[$i]['has_file'] = false;
$file_list[$i]['filesize'] = filesize($file);
$file_list[$i]['dir_path'] = '';
$file_ext = strtolower(pathinfo($file, 

PATHINFO_EXTENSION));
$file_list[$i]['is_photo'] = in_array($file_ext, 

$ext_arr);
$file_list[$i]['filetype'] = $file_ext;
}
$file_list[$i]['filename'] = $filename; //文件名,包含扩展

$file_list[$i]['datetime'] = date('Y-m-d H:i:s', 

filemtime($file)); //文件最后修改时间
$i++;
}
closedir($handle);
}


usort($file_list, 'cmp_func');

$result = array();
//相对于根目录的上一级目录
$result['moveup_dir_path'] = $moveup_dir_path;
//相对于根目录的当前目录
$result['current_dir_path'] = $current_dir_path;
//当前目录的URL
$result['current_url'] = $current_url;
//文件数
$result['total_count'] = count($file_list);
//文件列表数组
$result['file_list'] = $file_list;

//输出JSON字符串
header('Content-type: application/json; charset=UTF-8');
$json = new \Services_JSON();
echo $json->encode($result);

}


//排序
function cmp_func($a, $b) {
global $order;
if ($a['is_dir'] && !$b['is_dir']) {
return -1;
} else if (!$a['is_dir'] && $b['is_dir']) {
return 1;
} else {
if ($order == 'size') {
if ($a['filesize'] > $b['filesize']) {
return 1;
} else if ($a['filesize'] < $b['filesize']) {
return -1;
} else {
return 0;
}
} else if ($order == 'type') {
return strcmp($a['filetype'], $b['filetype']);
} else {
return strcmp($a['filename'], $b['filename']);
}
}
}




function alert($msg) {
header('Content-type: text/html; charset=UTF-8');
$json = new Services_JSON();
echo $json->encode(array('error' => 1, 'message' => $msg));
exit;
}



}




    这些内容,都是从kindeditor中的php文件夹中的内容,做了少量的修改,文件的保存路径,屏蔽

生成的文件夹,index() 方法是 上传的方法内容,filemanager()就是浏览服务器上的图片的方法。


    以上是控制器的方法,接下来的是模板的调用。





KindEditor.ready(function(K) {
var editor = K.editor({
allowFileManager : true,
uploadJson : '__APP__/Upload/index/',
});
K('.upbnt').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
showRemote : false,
clickFn : function(url, title, 

width, height, border, align) {
K('#imgurl').val(url);
editor.hideDialog();
}
});
});
});
var editor1 = K.editor({
allowFileManager : true,
fileManagerJson : '__APP__/Upload/filemanager'
});
K('#button2').click(function() {
editor1.loadPlugin('filemanager', function() {
editor1.plugin.filemanagerDialog({
viewType : 'VIEW',
dirName : 'image',
clickFn : function(url, title) {
K('#imgurl2').val(url);
editor.hideDialog();
}
});
});
});
var editor2 = K.editor({
allowFileManager : true,
uploadJson : '__APP__/Upload/index/',
});
K('#button3').click(function() {
editor2.loadPlugin('multiimage', function() {
editor2.plugin.multiImageDialog({
clickFn : function(urlList) {
var div = K

('#J_imageView');
div.html('');
K.each(urlList, function

(i, data) {
div.append('

src="' + data.url + '" width=200 height=200 />');
});
editor2.hideDialog();
}
});
});
});
});



上传本地图片




浏览服务器图片




批量上传图片




所有图片都会上传根目录的uploads中,测试时要先使用新建此目录。
解释一下:之所以要将上传的方法写到控制器中,而不直接调用kindeditor目录中的上传方法,是因为

考虑到安全性问题。在kindeditor目录,因为没有权限控制,任何人都能调用(假设在linux下没有设

置777),侧其他人可以利用该方法,上传一些恶意文件到服务器上。而我另外写到controller里面,

是因为每个controller都继承common,common一般都有做权限控制,如果没有登录,是无法调用的!

源码我已经上传到我个人git上:http://git.oschina.net/kakenwu/case.git
    thinkphp 有一个扩展类,该类在上传的时候的确不错,很多参数可以修改,但是如果要配合到前

端一些jquery特效的时候,个人感觉有点耗时,然后就使用了kindeditor,这应该算是比较传统的文本

编辑器,现在新的新浪、百度等等的,不过每个文本编辑器使用方法都是差不多的。
    这次主要使用kindeditor实现上传本地图片、浏览服务器图片、批量上传图片的功能,这些案例在

kindeditor的官方网都能找到,但是总不能复制黏贴到项目上就能使用的(好的,废话不说了!)

    首先下载kindeditor的核心包,我将kindeditor的核心包放在./Public(位置随自己喜欢)。
    新建一个UploadController.class.php 内容如下

namespace Home\Controller;

class UploadController extends CommonController {

public function index(){
$php_path = $_SERVER['DOCUMENT_ROOT'].__ROOT__ . '/';
$php_url = __ROOT__ . '/';

//文件保存目录路径
$save_path = $php_path.'./uploads/';
//文件保存目录URL
$save_url = $php_url.'./uploads/';
//定义允许上传的文件扩展名
$ext_arr = array(
'image' => array('gif', 'jpg', 'jpeg', 'png', 

'bmp','GIF','JPG','JPEG','PNG','BMP'),
);
//最大文件大小
$max_size = 1000000;

$save_path = realpath($save_path) . '/';

//PHP上传失败
if (!empty($_FILES['imgFile']['error'])) {
switch($_FILES['imgFile']['error']){
case '1':
$error = '超过php.ini允许的大小。';
break;
case '2':
$error = '超过表单允许的大小。';
break;
case '3':
$error = '图片只有部分被上传。';
break;
case '4':
$error = '请选择图片。';
break;
case '6':
$error = '找不到临时目录。';
break;
case '7':
$error = '写文件到硬盘出错。';
break;
case '8':
$error = 'File upload stopped by extension。';
break;
case '999':
default:
$error = '未知错误。';
}
$this->alert($error);
}

//有上传文件时
if (empty($_FILES) === false) {
//原文件名
$file_name = $_FILES['imgFile']['name'];
//服务器上临时文件名
$tmp_name = $_FILES['imgFile']['tmp_name'];
//文件大小
$file_size = $_FILES['imgFile']['size'];
//检查文件名
if (!$file_name) {
$this->alert("请选择文件。");
}
//检查目录
if (@is_dir($save_path) === false) {
$this->alert("上传目录不存在。");
}
//检查目录写权限
if (@is_writable($save_path) === false) {
$this->alert("上传目录没有写权限。");
}
//检查是否已上传
if (@is_uploaded_file($tmp_name) === false) {
$this->alert("上传失败。");
}
//检查文件大小
if ($file_size > $max_size) {
$this->alert("上传文件大小超过限制。");
}
//检查目录名
$dir_name = empty($_GET['dir']) ? 'image' : trim($_GET['dir']);
if (empty($ext_arr[$dir_name])) {
$this->alert("目录名不正确。");
}
//获得文件扩展名
$temp_arr = explode(".", $file_name);
$file_ext = array_pop($temp_arr);
$file_ext = trim($file_ext);
$file_ext = strtolower($file_ext);
//检查扩展名
if (in_array($file_ext, $ext_arr[$dir_name]) === false) {
$this->alert("上传文件扩展名是不允许的扩展名。\n只允许" . 

implode(",", $ext_arr[$dir_name]) . "格式。");
}
//创建文件夹
// if ($dir_name !== '') {
// $save_path .= $dir_name . "/";
// $save_url .= $dir_name . "/";
// if (!file_exists($save_path)) {
// mkdir($save_path);
// }
// }
// $ymd = date("Ymd");
// $save_path .= $ymd . "/";
// $save_url .= $ymd . "/";
// if (!file_exists($save_path)) {
// mkdir($save_path);
// }
//新文件名
$new_file_name = date("YmdHis") . '_' . rand(10000, 99999) . '.' . 

$file_ext;
//移动文件
$file_path = $save_path . $new_file_name;
if (move_uploaded_file($tmp_name, $file_path) === false) {
$this->alert("上传文件失败。");
}
@chmod($file_path, 0644);
$file_url = $save_url . $new_file_name;

header('Content-type: text/html; charset=UTF-8');
require_once './Public/kindeditor/php/JSON.php';
$json = new \Services_JSON();
echo $json->encode(array('error' => 0, 'url' => $file_url));
exit;




}

public function filemanager(){

require_once './Public/kindeditor/php/JSON.php';

$php_path = dirname(__FILE__) . '/';
$php_url = dirname($_SERVER['PHP_SELF']) . '/';

//根目录路径,可以指定绝对路径,比如 /var/www/attached/
$root_path =  './uploads/';
//根目录URL,可以指定绝对路径,比如 http://www.yoursite.com/attached/
$root_url =  'http://'.$_SERVER['HTTP_HOST'].$php_url.'uploads/';
//图片扩展名
$ext_arr = array('gif', 'jpg', 'jpeg', 'png', 'bmp');

//目录名
$dir_name = empty($_GET['dir']) ? '' : trim($_GET['dir']);
// if (!in_array($dir_name, array('', 'image', 'flash', 'media', 'file'))) 

{
// echo "Invalid Directory name.";
// exit;
// }
// if ($dir_name !== '') {
// $root_path .= $dir_name . "/";
// $root_url .= $dir_name . "/";
// if (!file_exists($root_path)) {
// mkdir($root_path);
// }
// }

//根据path参数,设置各路径和URL
if (empty($_GET['path'])) {
$current_path = realpath($root_path) . '/';
$current_url = $root_url;
$current_dir_path = '';
$moveup_dir_path = '';
} else {
$current_path = realpath($root_path) . '/' . $_GET['path'];
$current_url = $root_url . $_GET['path'];
$current_dir_path = $_GET['path'];
$moveup_dir_path = preg_replace('/(.*?)[^\/]+\/$/', '$1', 

$current_dir_path);
}
//echo realpath($root_path);
//排序形式,name or size or type
$order = empty($_GET['order']) ? 'name' : strtolower($_GET['order']);

//不允许使用..移动到上一级目录
if (preg_match('/\.\./', $current_path)) {
echo 'Access is not allowed.';
exit;
}
//最后一个字符不是/
if (!preg_match('/\/$/', $current_path)) {
echo 'Parameter is not valid.';
exit;
}
//目录不存在或不是目录
if (!file_exists($current_path) || !is_dir($current_path)) {
echo 'Directory does not exist.';
exit;
}

//遍历目录取得文件信息
$file_list = array();
if ($handle = opendir($current_path)) {
$i = 0;
while (false !== ($filename = readdir($handle))) {
if ($filename{0} == '.') continue;
$file = $current_path . $filename;
if (is_dir($file)) {
$file_list[$i]['is_dir'] = true; //是否文件夹
$file_list[$i]['has_file'] = (count(scandir

($file)) > 2); //文件夹是否包含文件
$file_list[$i]['filesize'] = 0; //文件大小
$file_list[$i]['is_photo'] = false; //是否图片
$file_list[$i]['filetype'] = ''; //文件类别,用扩

展名判断
} else {
$file_list[$i]['is_dir'] = false;
$file_list[$i]['has_file'] = false;
$file_list[$i]['filesize'] = filesize($file);
$file_list[$i]['dir_path'] = '';
$file_ext = strtolower(pathinfo($file, 

PATHINFO_EXTENSION));
$file_list[$i]['is_photo'] = in_array($file_ext, 

$ext_arr);
$file_list[$i]['filetype'] = $file_ext;
}
$file_list[$i]['filename'] = $filename; //文件名,包含扩展

$file_list[$i]['datetime'] = date('Y-m-d H:i:s', 

filemtime($file)); //文件最后修改时间
$i++;
}
closedir($handle);
}


usort($file_list, 'cmp_func');

$result = array();
//相对于根目录的上一级目录
$result['moveup_dir_path'] = $moveup_dir_path;
//相对于根目录的当前目录
$result['current_dir_path'] = $current_dir_path;
//当前目录的URL
$result['current_url'] = $current_url;
//文件数
$result['total_count'] = count($file_list);
//文件列表数组
$result['file_list'] = $file_list;

//输出JSON字符串
header('Content-type: application/json; charset=UTF-8');
$json = new \Services_JSON();
echo $json->encode($result);

}


//排序
function cmp_func($a, $b) {
global $order;
if ($a['is_dir'] && !$b['is_dir']) {
return -1;
} else if (!$a['is_dir'] && $b['is_dir']) {
return 1;
} else {
if ($order == 'size') {
if ($a['filesize'] > $b['filesize']) {
return 1;
} else if ($a['filesize'] < $b['filesize']) {
return -1;
} else {
return 0;
}
} else if ($order == 'type') {
return strcmp($a['filetype'], $b['filetype']);
} else {
return strcmp($a['filename'], $b['filename']);
}
}
}




function alert($msg) {
header('Content-type: text/html; charset=UTF-8');
$json = new Services_JSON();
echo $json->encode(array('error' => 1, 'message' => $msg));
exit;
}



}




    这些内容,都是从kindeditor中的php文件夹中的内容,做了少量的修改,文件的保存路径,屏蔽

生成的文件夹,index() 方法是 上传的方法内容,filemanager()就是浏览服务器上的图片的方法。


    以上是控制器的方法,接下来的是模板的调用。





KindEditor.ready(function(K) {
var editor = K.editor({
allowFileManager : true,
uploadJson : '__APP__/Upload/index/',
});
K('.upbnt').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
showRemote : false,
clickFn : function(url, title, 

width, height, border, align) {
K('#imgurl').val(url);
editor.hideDialog();
}
});
});
});
var editor1 = K.editor({
allowFileManager : true,
fileManagerJson : '__APP__/Upload/filemanager'
});
K('#button2').click(function() {
editor1.loadPlugin('filemanager', function() {
editor1.plugin.filemanagerDialog({
viewType : 'VIEW',
dirName : 'image',
clickFn : function(url, title) {
K('#imgurl2').val(url);
editor.hideDialog();
}
});
});
});
var editor2 = K.editor({
allowFileManager : true,
uploadJson : '__APP__/Upload/index/',
});
K('#button3').click(function() {
editor2.loadPlugin('multiimage', function() {
editor2.plugin.multiImageDialog({
clickFn : function(urlList) {
var div = K

('#J_imageView');
div.html('');
K.each(urlList, function

(i, data) {
div.append('

src="' + data.url + '" width=200 height=200 />');
});
editor2.hideDialog();
}
});
});
});
});



上传本地图片




浏览服务器图片




批量上传图片




所有图片都会上传根目录的uploads中,测试时要先使用新建此目录。
解释一下:之所以要将上传的方法写到控制器中,而不直接调用kindeditor目录中的上传方法,是因为

考虑到安全性问题。在kindeditor目录,因为没有权限控制,任何人都能调用(假设在linux下没有设

置777),侧其他人可以利用该方法,上传一些恶意文件到服务器上。而我另外写到controller里面,

是因为每个controller都继承common,common一般都有做权限控制,如果没有登录,是无法调用的!

源码我已经上传到我个人git上:http://git.oschina.net/kakenwu/case.git
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值