THINKPHP3.2.3实现后台自定义图片上传配置
- WBOYオリジナル
- 2016-06-06 19:38:081145ブラウズ
THINKPHP3.2.3实现后台自定义图片上传格式、大小；添加水印的条件（宽度大于多少高度大于多少才会添加水印）、水印类型（文字和图片）、水印文字的颜色和大小，水印图片上传，水印的位置以及透明度的配置 演示地址请访问http://www.gouguoyin.cn/php/32.html
THINKPHP3.2.3实现后台自定义图片上传格式、大小；添加水印的条件（宽度大于多少高度大于多少才会添加水印）、水印类型（文字和图片）、水印文字的颜色和大小，水印图片上传，水印的位置以及透明度的配置
演示地址请访问http://www.gouguoyin.cn/php/32.html
ThinkPHP
下面开始教程
一、数据库
首页要在数据库创建一个网站配置表，各个字段说明如下
CREATE TABLE IF NOT EXISTS `go_config` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`field` varchar(255) NOT NULL COMMENT '属性字段',
`title` varchar(255) NOT NULL COMMENT '字段标题',
`mark` varchar(255) NOT NULL COMMENT '备注信息，主要用于placeholder显示',
`field_type` varchar(255) NOT NULL DEFAULT 'string' COMMENT '字段类型,string:字符串 longstring:长字符串 phone:手机号 email:邮箱 url:链接地址 bool:布尔 text:多行文本 editor:编辑器 pic:图片 file:文件，默认string',
`config_type` varchar(255) NOT NULL DEFAULT 'site' COMMENT '配置类型',
`value` varchar(255) NOT NULL COMMENT '字段值',
`is_system` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否是系统字段，0：否 1：是 ，系统字段无法删除',
`is_required` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否必填，1：必填 0：非必填，默认0',
`sort` int(10) NOT NULL DEFAULT '1' COMMENT '排序',
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '状态,1：正常，0：回收站，默认1',
`add_time` datetime NOT NULL COMMENT '添加时间',
`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
PRIMARY KEY (`id`),
UNIQUE KEY `field` (`field`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='系统配置表' AUTO_INCREMENT=1 ;
二、控制器
在项目的application/Admin/Controller/目录下建立ConfigController.class.php控制器，代码如下
<?php
/**
* alltosun.com ConfigController.class.php
* ============================================================================
* 版权所有 (C) 2014-2016 GoCMS内容管理系统
* 官方网站: http://www.gouguoyin.cn
* 联系方式: QQ:245629560
* ----------------------------------------------------------------------------
* 许可声明：这是一个开源程序，未经许可不得将本软件的整体或任何部分用于商业用途及再发布。
* ============================================================================
* $Author: 勾国印 (phper@gouguoyin.cn) $
* $Date: 2015-4-17 下午3:27:55 $
* $Id$
*/
namespace Admin\Controller;
use Think\Controller;
class ConfigController extends Controller {
//上传设置
public function upload()
{
$this->display('config_upload');
}
//保存上传配置
public function upload_save()
{
$data = I('post.');
foreach ($data as $k => $v) {
$result = M('Config')->where(array('field' => $k))->save(array('value' => $v));
}
$this->success('上传设置保存成功', U('Admin/Config/upload'));
}
}
三、视图模板
在项目的application/Admin/View/Config目录下建立config_upload.html的模板，代码如下
{include file="Public/header" title="上传设置"/}
{include file="Public/sidebar"/}
<!-- 颜色选择器 -->
<link rel="stylesheet" href="CSS/jquery.bigcolorpicker.css" type="text/css">
<script type="text/javascript" src="JS/jquery.bigcolorpicker.min.js"></script>
<!-- 主内容 start -->
<div id="content" class="span10">
<!-- 标题 start -->
<div class="pageTit page-header">
<h1>编辑上传配置信息</h1>
</div>
<!-- 标题 end -->
<!-- 内容区块 start -->
<div class="formBox">
<form id="addform" action="{:U('Admin/Config/upload_save')}" method="post" enctype="multipart/form-data">
<div class="control-group">
<label>允许上传图片格式：(<font color="red">请用"|"分割格式，例如jpg|png|gif</font>)</label>
<input type="text" name="upload_pic_suffix" value="{:getConfigValue('upload_pic_suffix')}" class="form-control js_site_name" placeholder="" datatype="*2-50" nullmsg="请填写允许上传图片格式" errormsg="请填写允许上传图片格式" />
<span class="Validform_checktip"></span>
</div>
<div class="control-group">
<label>允许上传多媒体格式：(<font color="red">请用"|"分割格式，例如swf|flv|mpg</font>)</label>
<input type="text" name="upload_media_suffix" value="{:getConfigValue('upload_media_suffix')}" class="form-control js_site_name" placeholder="" datatype="*2-50" nullmsg="请填写允许上传多媒体格式" errormsg="请填写允许上传多媒体格式" />
<span class="Validform_checktip"></span>
</div>
<div class="control-group">
<label>允许上传文件格式：(<font color="red">请用"|"分割格式，例如zip|rar|doc|xls</font>)</label>
<input type="text" name="upload_file_suffix" value="{:getConfigValue('upload_file_suffix')}" class="form-control js_site_name" placeholder="" datatype="*2-50" nullmsg="请填写允许上传文件格式" errormsg="请填写允许上传文件格式" />
<span class="Validform_checktip"></span>
</div>
<div class="control-group">
<label>允许上传文件大小限制：(<font color="red">单位:M</font>)</label>
<input type="text" name="upload_file_size" value="{:getConfigValue('upload_file_size')}" placeholder="" datatype="n1-2" nullmsg="请填写允许上传文件大小" errormsg="允许上传文件最大不能超过100M" />
<span class="Validform_checktip"></span>
</div>
<div class="js_thumbBox {if condition="$upload_add_thumb eq 0"}hidden{/if}">
<div class="control-group">
<label>生成缩略图条件：(<font color="red">单位:px</font>)</label>
上传图片宽度大于：<input type="text" name="upload_thumb_pic_width" value="{:getConfigValue('upload_thumb_pic_width')}" placeholder="" datatype="n1-4" nullmsg="请填写上传图片宽度" errormsg="最大不能超过9999px" style="width:50px"/>
上传图片高度大于：<input type="text" name="upload_thumb_pic_height" value="{:getConfigValue('upload_thumb_pic_height')}" placeholder="" datatype="n1-4" nullmsg="请填写上传图片高度" errormsg="最大不能超过9999px" style="width:50px"/>
<span class="Validform_checktip"></span>
</div>
<div class="control-group">
<label>缩略图默认大小：(<font color="red">单位:px</font>)</label>
<input type="text" name="upload_thumb_width" value="{:getConfigValue('upload_thumb_width')}" placeholder="" datatype="n1-4" nullmsg="请填写缩略图默认宽度" errormsg="缩略图默认宽度最大9999px" style="width:50px"/> × <input type="text" name="upload_thumb_height" value="{:getConfigValue('upload_thumb_height')}" placeholder="" datatype="n1-4" nullmsg="请填写缩略图默认高度" errormsg="缩略图默认高度最大9999px" style="width:50px"/>
<span class="Validform_checktip"></span>
</div>
</div>
<div class="control-group">
<label>添加水印条件：(<font color="red">单位:px</font>)</label>
上传图片宽度大于：<input type="text" name="upload_watermark_pic_width" value="{:getConfigValue('upload_watermark_pic_width')}" placeholder="" datatype="n1-4" nullmsg="请填写上传图片宽度" errormsg="最大不能超过9999px" style="width:50px"/>
上传图片高度大于：<input type="text" name="upload_watermark_pic_height" value="{:getConfigValue('upload_watermark_pic_height')}" placeholder="" datatype="n1-4" nullmsg="请填写上传图片高度" errormsg="最大不能超过9999px" style="width:50px"/>
<span class="Validform_checktip"></span>
</div>
<div class="control-group">
<label>水印类型：</label>
<a class="hidden">{$upload_watermark_type = getConfigValue('upload_watermark_type')}</a>
<input type="radio" name="upload_watermark_type" class="js_watermarkType" value="1" {if condition="$upload_watermark_type eq 1"}checked{/if}> 文字
<input type="radio" name="upload_watermark_type" class="js_watermarkType" value="2" {if condition="$upload_watermark_type eq 2"}checked{/if}> 图片
</div>
<div class="js_textBox {if condition="$upload_watermark_type neq 1"}hidden{/if}">
<div class="control-group">
<label>水印文字：</label>
<input type="text" name="upload_watermark_text" value="{:getConfigValue('upload_watermark_text')}" datatype="s1-20" nullmsg="请填写水印文字" errormsg="请输入1-20个字母或汉字" />
<span class="Validform_checktip"></span>
</div>
<div class="control-group">
<label>水印字体颜色：</label>
<input type="text" name="upload_watermark_color" id="js_watermarkColor" value="{:getConfigValue('upload_watermark_color')}" datatype="*7-7" nullmsg="请选择水印字体颜色" errormsg="颜色格式不正确" />
<span class="Validform_checktip"></span>
</div>
<div class="control-group">
<label>水印字体大小：(<font color="red">单位:px</font>)</label>
<input type="text" name="upload_watermark_size" value="{:getConfigValue('upload_watermark_size')}" datatype="n1-2" nullmsg="请填写水印字体大小" />
<span class="Validform_checktip"></span>
</div>
</div>
<div class="js_picBox {if condition="$upload_watermark_type neq 2"}hidden{/if}">
<div class="control-group">
<label>上传水印图片：(<font color="red">点击图片更换水印</font>)</label>
<a href="javascript:void(0);" class="js_picBtn" title="点击更换水印"><img id="js_logoBox" src="{:getConfigValue('upload_watermark')}" style="max-width:90%" alt="THINKPHP3.2.3实现后台自定义图片上传配置" ></a>
<input type="hidden" name="upload_watermark" id="js_upload" value="{:getConfigValue('upload_watermark')}"/>
</div>
<div class="control-group">
<label>水印图片默认大小：(<font color="red">单位:px</font>)</label>
<input type="text" name="upload_watermark_width" value="{:getConfigValue('upload_watermark_width')}" placeholder="" datatype="n1-4" nullmsg="请填写缩略图默认宽度" errormsg="缩略图默认宽度最大9999px" style="width:50px"/> × <input type="text" name="upload_watermark_height" value="{:getConfigValue('upload_watermark_height')}" placeholder="" datatype="n1-4" nullmsg="请填写缩略图默认高度" errormsg="缩略图默认高度最大9999px" style="width:50px"/>
<span class="Validform_checktip"></span>
</div>
</div>
<div class="control-group">
<label>水印位置：</label>
<a class="hidden">{$upload_watermark_position = getConfigValue('upload_watermark_position')}</a>
<select class="form-control width-middle" name="upload_watermark_position">
<option value="1" {if condition="$upload_watermark_position eq 1"}selected{/if}>顶部居左</option>
<option value="2" {if condition="$upload_watermark_position eq 2"}selected{/if}>顶部居中</option>
<option value="3" {if condition="$upload_watermark_position eq 3"}selected{/if}>顶部居右</option>
<option value="4" {if condition="$upload_watermark_position eq 4"}selected{/if}>中间居左</option>
<option value="5" {if condition="$upload_watermark_position eq 5"}selected{/if}>居中</option>
<option value="6" {if condition="$upload_watermark_position eq 6"}selected{/if}>中间居右</option>
<option value="7" {if condition="$upload_watermark_position eq 7"}selected{/if}>底部居左</option>
<option value="8" {if condition="$upload_watermark_position eq 8"}selected{/if}>底部居中</option>
<option value="9" {if condition="$upload_watermark_position eq 9"}selected{/if}>底部居右</option>
</select>
</div>
<div class="control-group">
<label>水印透明度：(<font color="red">单位:%,数值越小越透明</font>)</label>
<input type="text" name="upload_watermark_opacity" value="{:getConfigValue('upload_watermark_opacity')}" datatype="n1-2" nullmsg="请填写水印透明度" errormsg="水印透明度只能在0-100之间" />
<span class="Validform_checktip"></span>
</div>
</div>
<div class="control-group">
<img style="max-width:90%" src="images/loading.gif" / alt="THINKPHP3.2.3实现后台自定义图片上传配置" >
<input type="submit" class="btn btn-primary Sub" value="保存" />
</div>
</form>
</div>
<!-- 内容区块 end -->
</div>
<!-- 主内容 end -->
<script>
KindEditor.ready(function(K) {
var editor = K.editor({
allowFileManager : false,
uploadJson: "{:U('Admin/Upload/index')}",
});
K('.js_picBtn').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
imageUrl : K('#js_logoBox').attr("src"),
clickFn : function(url, title, width, height, border, align) {
K('#js_logoBox').attr("src","__ROOT__"+url);
K('#js_upload').val("__ROOT__"+url);
editor.hideDialog();
}
});
});
});
});
</script>
<script>
$(function(){
//颜色选择器
$("#js_watermarkColor").bigColorpicker("js_watermarkColor");
//提交表单合法性验证，这里用了volidform表单验证插件，具体用法请访问官网http://validform.rjboy.cn/
$("#addform").Validform({
tiptype:function(msg,o,cssctl){
if(!o.obj.is("form")){
var objtip=o.obj.siblings(".Validform_checktip");
cssctl(objtip,o.type);
objtip.text(msg);
}
},
label:"label",
});
$(".js_watermarkType").change(function(){
var watermarkType = $(".js_watermarkType:checked").val();
if(watermarkType == 1){
$(".js_textBox").show();
$(".js_picBox").hide();
}else{
$(".js_textBox").hide();
$(".js_picBox").show();
}
});
})
</script>
</div>
</div>
<!-- 主容器 end -->
{include file="Public/footer"/}
四、使用方法
在项目的application/Common/Helper目录（没有Helper目录请自行创建）下建立Upload.class.php助手函数库，代码如下
<?php
/**
* alltosun.com Upload.class.php
* ============================================================================
* 版权所有 (C) 2014-2016 GoCMS内容管理系统
* 官方网站: http://www.gouguoyin.cn
* 联系方式: QQ:245629560
* ----------------------------------------------------------------------------
* 许可声明：这是一个开源程序，未经许可不得将本软件的整体或任何部分用于商业用途及再发布。
* ============================================================================
* $Author: 勾国印 (phper@gouguoyin.cn) $
* $Date: 2015-4-17 下午4:06:39 $
* $Id$
*/
namespace Common\Helper;
class Upload{
static public function index($type='image', $is_thumb=0, $is_water=0) {
/* 返回标准数据 */
$return = array('error' => 0);
//获取上传类型image、flash、media、file
//从数据库获取上传配置信息
$max_size = getConfigValue('upload_file_size')*1024*1024;
//允许上传的图片后缀
$upload_pic_suffix = getConfigValue('upload_pic_suffix');
$pic_ext_arr = explode('|', $upload_pic_suffix);
//允许上传的多媒体后缀
$upload_media_suffix = getConfigValue('upload_media_suffix');
$media_ext_arr = explode('|', $upload_media_suffix);
//允许上传的文件后缀
$upload_file_suffix = getConfigValue('upload_file_suffix');
$file_ext_arr = explode('|', $upload_file_suffix);
//生成缩略图默认大小
$upload_thumb_width = getConfigValue('upload_thumb_width');
$upload_thumb_height = getConfigValue('upload_thumb_height');
//水印类型
$upload_watermark_type = getConfigValue('upload_watermark_type');
//文字水印文本
$upload_watermark_text = getConfigValue('upload_watermark_text');
//文字水印颜色
$upload_watermark_color = getConfigValue('upload_watermark_color');
//文字水印大小
$upload_watermark_size = getConfigValue('upload_watermark_size');
$upload_watermark_pic_width = getConfigValue('upload_watermark_pic_width');
$upload_watermark_pic_height = getConfigValue('upload_watermark_pic_height');
//图片水印路径
$upload_watermark = '.'.getConfigValue('upload_watermark');
if(!$upload_watermark){
$upload_watermark = './Public/images/water.png';
}
//水印宽度
$upload_watermark_width = getConfigValue('upload_watermark_width');
//水印高度
$upload_watermark_height = getConfigValue('upload_watermark_height');
//水印位置
$upload_watermark_position = getConfigValue('upload_watermark_position');
//水印透明度
$upload_watermark_opacity = getConfigValue('upload_watermark_opacity');
//上传配置
$ext_arr = array(
'image' => $pic_ext_arr,
'media' => $media_ext_arr,
'file' => $file_ext_arr
);
$upload = new \Think\Upload(); // 实例化上传类
$upload->maxSize = $max_size; // 设置附件上传大小
$upload->exts = $ext_arr[$type]; // 设置附件上传类型
$upload->savePath = './'.$type. '/';
$file_info = $upload->upload();
if ($file_info) {
foreach($file_info as $info){
$file_path = './Uploads'.$info['savepath']. $info['savename'];
}
//引入图片处理类
$image = new \Think\Image();
$image->open($file_path);
$width = $image->width();
$height = $image->height();
//生成缩略图
//$image->crop($upload_thumb_width, $upload_thumb_height, 1)->save('./crop.jpg');
//添加水印
if($is_water && $width >= $upload_watermark_pic_width && $height>= $upload_watermark_pic_height){
if($upload_watermark_type == 2){
//添加图片水印
$image->water($upload_watermark, $upload_watermark_position, $upload_watermark_opacity)->save($file_path);
}else{
//添加文字水印
$image->text($upload_watermark_text, './Public/font/vista.ttf', $upload_watermark_size, $upload_watermark_color, $upload_watermark_position)->save($file_path);
}
}
$base_url = './Uploads/';
$return['url'] = substr($base_url, 1).$info['savepath']. $info['savename'];
} else {
$return['error'] = 1;
$return['message'] = $upload->getError();
}
exit(json_encode($return));
}
}
在控制器里使用方法：
引入助手函数库
use Common\Helper\Upload;调用上传函数
//$is_thumb 是否启用缩略图 ，$is_water是否启用水印
$pic_data = Upload::index($type='image', $is_thumb=0, $is_water=0);
$pic_data数组里返回有上传图片的路径url，如果上传失败，则会返回错误代码和错误信息。有了上传图片的路径就可以对上传图片进行入库等操作了。
注：为方便大家使用，特将核心代码打包上传，大家请点击“下载源码”按钮下载打包文件。
源码下载地址http://www.gouguoyin.cn/php/32.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：演示json编码次の記事：Smarty 自定义函数中的传值问题