THINKPHP3.2.3实现后台自定义图片上传配置
- WBOYOriginal
- 2016-06-06 19:38:081145browse
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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：演示json编码Next article：Smarty 自定义函数中的传值问题