后台可以上传图片的地方有两个
缩略图上传
2.编辑器图片上传
有时候经常会上传同一张图片 这样有点浪费服务器资源 所以想加一个已上传图片选择
我搜索了一下站内有人发过这么一篇文章
http://www.thinkcmf.com/topic/topic/index/id/639.html
但是要收钱 所以自己做了一个
下面是代码
(我用的thinkcmf 版本是 X2.2.0 其他版本请自己尝试)
Ⅰ 修改编辑器图片上传
1. 打开 \public\js\ueditor\dialogs\image\image.html 24行
会看到
<!-- <span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
<span class="tab" data-content-id="search"><var id="lang_tab_search"></var></span> -->
这里隐藏的 一个是在线图片管理 一个是图片搜索 这里吧把在线管理去掉注释即可
<span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
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 data-tab="network-file"><a href="#network-file-tab" data-toggle="tab">网络文件</a></li>
下面添加一个li
<li data-tab="history-file"><a href="#history-file-tab" data-toggle="tab" class="history">已上传文件</a></li>
然后在
<div class="tab-pane" id="network-file-tab">
请输入网络地址<br>
<input type="text" name="info[filename]" style="width: 600px;" placeholder="http://" id="network-file-input">
</div>
下面添加以下代码 用来显示已上传图片
<div class="tab-pane" id="history-file-tab">
<div class="files-wrapper">
<ul id="files-container-history">
<div class="k" style="width:100%;height:1px;clear:both;"></div>
</ul>
</div>
</div>
然后修改 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=$('\
<li class="selected">\
<div class="selected-icon-wrapper"><i class="fa fa-check-circle"></i></div>\
<div class="upload-percent">0%</div>\
</li>');
$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/>');
$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 + '<li class="uploaded">'
+ '<div class="selected-icon-wrapper">'
+ '<i class="fa fa-check-circle"></i></div>'
+ '<div class="upload-percent">'
+ '<img src="' + list[i].url + '"></div></li>';
}
}
$('#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
0.话题发布后没及时显示,请联系官方QQ群管理;
1.话题支持代码,qq截屏直接粘贴,和QQ群一样;
2.问题描述清,比如服务器版本,程序版本;
3.能上代码,就不用文字;
4.把问题发到话题后再发QQ群;
5.如果感觉回复者解答的不错,可以发红包!
6.多帮助别人也是对自己的锻炼!
7.付费讨论中只有提问者和付费用户才可以查看回复
1.评论积分+1;每天最多10次奖励
2.发布话题积分+1;每天最多5次奖励
3.垃圾评论积分-500;
4.黄色,暴力,违反我国法律评论直接封号