THINKPHP3.2.3实现后台自定义图片上传配置

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 id="编辑上传配置信息">编辑上传配置信息</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  src="/static/imghw/default1.png"  data-src="{:getConfigValue('upload_watermark')}"  class="lazy"  id="js_logoBox"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  src="/static/imghw/default1.png"  data-src="images/loading.gif"  class="lazy"    style="max-width:90%" / 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