php上传tup在线管理目录,完善图片上传-在线图片

后台可以上传图片的地方有两个

缩略图上传

2.编辑器图片上传

有时候经常会上传同一张图片 这样有点浪费服务器资源 所以想加一个已上传图片选择

我搜索了一下站内有人发过这么一篇文章

http://www.thinkcmf.com/topic/topic/index/id/639.html

但是要收钱 所以自己做了一个

下面是代码

(我用的thinkcmf 版本是  X2.2.0 其他版本请自己尝试)

Ⅰ  修改编辑器图片上传

1. 打开 \public\js\ueditor\dialogs\image\image.html 24行

会看到

这里隐藏的 一个是在线图片管理 一个是图片搜索 这里吧把在线管理去掉注释即可

2. 打开  \application\Asset\Controller\UeditorController.class.php

加上两个函数

//列出图片

private function _get_listimage(){

$allowFiles = array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" ); //文件允许格式

$listSize = 3000; //文件大小限制，单位KB

$path = './'. C("UPLOADPATH"); //图片路径

$allowFiles = substr(str_replace(".", "|", join("", $allowFiles)), 1);

/* 获取参数 */

$size = isset($_GET['size']) ? htmlspecialchars($_GET['size']) : $listSize;

$start = isset($_GET['start']) ? htmlspecialchars($_GET['start']) : 0;

$end = $start + $size;

/* 获取文件列表 */

//$path = $_SERVER['DOCUMENT_ROOT'] . (substr($path, 0, 1) == "/" ? "":"/") . $path;

//echo $path;

$files = $this->getfiles($path, $allowFiles);

if (!count($files)) {

return json_encode(array(

"state" => "no match file",

"list" => array(),

"start" => $start,

"total" => count($files)

));

}

/* 获取指定范围的列表 */

$len = count($files);

for ($i = min($end, $len) - 1, $list = array(); $i < $len && $i >= 0 && $i >= $start; $i--){

$list[] = $files[$i];

}

//倒序

//for ($i = $end, $list = array(); $i < $len && $i < $end; $i++){

//    $list[] = $files[$i];

//}

/* 返回数据 */

$result = array(

"state" => "SUCCESS",

"list" => $list,

"start" => $start,

"total" => count($files)

);

return json_encode($result);

//$this->ajaxReturn($result);

}

/**

* 遍历获取目录下的指定类型的文件

* @param $path

* @param array $files

* @return array

*/

function getfiles($path, $allowFiles, &$files = array())

{

if (!is_dir($path)) return null;

if(substr($path, strlen($path) - 1) != '/') $path .= '/';

$handle = opendir($path);

while (false !== ($file = readdir($handle))) {

if ($file != '.' && $file != '..') {

$path2 = $path . $file;

if (is_dir($path2)) {

$this->getfiles($path2, $allowFiles, $files);

} else {

if (preg_match("/\.(".$allowFiles.")$/i", $file)) {

$files[] = array(

'url'=> substr(SITE_PATH . $path2, strlen($_SERVER['DOCUMENT_ROOT'])),

'mtime'=> filemtime($path2)

);

}

}

}

}

return $files;

}

然后修改80行为 $result = $this->_get_listimage();

到这里 编辑器部分已修改完毕

Ⅱ 修改缩略图上传

打开

在

网络文件

下面添加一个li

已上传文件

然后在

请输入网络地址

下面添加以下代码 用来显示已上传图片

然后修改 get_selected_files() 函数变成以下代码

function get_selected_files(){

var tab = $("#uploader-tabs li.active").data('tab');

var files= [];

if(tab=='upload-file'){

var $files=$('#files-container li.uploaded.selected');

if($files.length==0){

alert('请上传文件！');

return false;

}

$files.each(function(){

var $this=$(this);

var url = $this.data('url');

var preview_url = $this.data('preview_url');

var filepath = $this.data('filepath');

var name = $this.data('name');

var id = $this.data('id');

files.push({url:url,preview_url:preview_url,filepath:filepath,name:name,id:id});

});

}

if(tab=='network-file'){

var url=$('#network-file-input').val();

if(url==''){

alert('请填写文件地址！');

return false;

}

var id = "networkfile"+new Date().getTime();

files.push({url:url,preview_url:url,filepath:url,id:id});

}

if(tab == 'history-file'){

if($('#files-container-history li.selected').length == 0){

alert('请选择图片！');

return false;

}

var id = "historyfile"+new Date().getTime(),

url = $('#files-container-history li.selected').find('img').attr('src');

files.push({url:url,preview_url:url,filepath:url,id:id});

console.log(files);

}

return files;

}

最底部的js代码修改为

var multi={$multi};

var page = 0;

var listEnd = false;

var isLoadingData = false;

var listIndex = 0;

var listSize = 20;

Wind.use('plupload',function(){

var uploader = new plupload.Uploader({

runtimes : 'html5,flash,silverlight,html4',

browse_button : 'select-files', // you can pass an id...

container: document.getElementById('files-container'), // ... or DOM Element itself

url : "{:U('asset/asset/plupload')}",

flash_swf_url : '../js/Moxie.swf',

silverlight_xap_url : '../js/Moxie.xap',

filters : {

max_file_size : '{$upload_max_filesize_mb}mb',

mime_types: [{$mime_type}]

},

multi_selection:{$multi},

multipart_params:{

app:'{$app}'

},

init: {

PostInit: function() {

},

FilesAdded: function(up, files) {

plupload.each(files, function(file) {

var $newfile=$('\

\

0%

\');

$newfile.attr('id',file.id);

$('#files-container').append($newfile);

$newfile.on('click',function(){

var $this=$(this);

$this.toggleClass('selected');

});

});

uploader.start();

},

UploadProgress: function(up, file) {

$('#'+file.id).find('.upload-percent').text(file.percent+"%");

},

FileUploaded: function(up, file, response) {

var data = JSON.parse(response.response);

if(data.status==1){

if(!multi) {

$('#select-files').css('visibility','hidden');

}

                            var $img=$('');

$img.attr('src',data.url);

$('#'+file.id).addClass('uploaded')

.data('id',file.id)

.data('url',data.url)

.data('preview_url',data.preview_url)

.data('filepath',data.filepath)

.data('name',data.name)

.find('.upload-percent')

.html($img);

}else{

alert(data.message);

$('#'+file.id).remove();

}

},

Error: function(up, err) {

}

}

});

uploader.init();

});

$('.history').on('click',function(){

if($('#history-file-tab ul li').length == 0){

get_list();

}

});

//拉取图片

function get_list(){

if(!listEnd && !isLoadingData) {

isLoadingData = true;

var url = "{:U('Asset/Ueditor/upload',array('action'=>'listimage'))}";

$.ajax({

type: "GET",

url: url,

dataType: "json",

timeout : 10000,

data: {

start:listIndex,

size: listSize

},

success: function (json) {

try {

if (json.state == 'SUCCESS') {

show_img(json.list);

listIndex = parseInt(json.start) + parseInt(json.list.length);

if(listIndex >= json.total) {

listEnd = true;

}

isLoadingData = false;

}

} catch (e) {

if(json.indexOf('ue_separate_ue') != -1) {

var list = json.split(r.responseText);

listIndex = parseInt(list.length);

listEnd = true;

isLoadingData = false;

}

}

},

error: function () {

isLoadingData = false;

}

});

}

}

//显示图片

function show_img(list){

var str = '';

for (i = 0; i < list.length; i++) {

if(list[i] && list[i].url) {

str = str + '

'

+ '

'

+ '

'

+ '

'

                                  + '

';

}

}

$('#history-file-tab ul .k').before(str);

}

//滚动

$('#files-container-history').on('scroll', function(e){

var scrollTop = $(this).scrollTop() + $(this).outerHeight(true);

if(scrollTop >= $(this).find('.k').offset().top){

get_list();

}

});

//选择

$('#files-container-history').on('click','li',function(){

$(this).addClass('selected').siblings().removeClass('selected');

});

然后 修改下 css

#files-container-history li {

cursor: pointer;

}

到这里修改完毕 。

修改的比较匆忙 代码可能有点乱  仅供小菜鸟参考

有什么问题可以加我企鹅号 4631458