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

THINKPHP3.2.3实现后台自定义图片上传配置
THINKPHP3.2.3实现后台自定义图片上传格式、大小;添加水印的条件(宽度大于多少高度大于多少才会添加水印)、水印类型(文字和图片)、水印文字的颜色和大小,水印图片上传,水印的位置以及透明度的配置

用过DEDECMS的人都知道,织梦后台网站DedeCMS系统配置参数 - 图片水印设置 有关于上传图片的设置,很是方便。那么下文我们就给THINKPHP3.2.3增加类似的功能,并在织梦CMS的基础上细化配置。先看效果图

文字水印


图片水印

下面开始教程

一、数据库

首页要在数据库创建一个网站配置表,各个字段说明如下

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控制器,代码如下

    //保存上传配置
    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.html' title='上传设置'}
{include file = "Public/sidebar.html"}
<!-- 颜色选择器 -->
<link  rel="stylesheet"  href="{$smarty.const.CSS_PATH}/jquery.bigcolorpicker.css"  type="text/css">
<script type="text/javascript"  src="{$smarty.const.JS_PATH}/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('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="{config_helper::get_config_value('upload_pic_suffix')}" class="form-control js_site_name" placeholder="jpg|png|gif" 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="{config_helper::get_config_value('upload_media_suffix')}" class="form-control js_site_name" placeholder="swf|flv|mpg" 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="{config_helper::get_config_value('upload_file_suffix')}" class="form-control js_site_name" placeholder="zip|rar|doc|xls" datatype="*2-50" nullmsg="请填写允许上传文件格式" errormsg="请填写允许上传文件格式" />        
        <span class="Validform_checktip"></span>
        </div>
        
        <div class="control-group">
          <label>允许上传图片最大大小:(<font color="red">单位:M,服务器限制上传最大大小{ini_get('upload_max_filesize')}</font>)</label>
          <input type="text" name="upload_pic_max_size" value="{config_helper::get_config_value('upload_pic_max_size')}" placeholder="" datatype="n1-2" nullmsg="请填写允许上传文件大小" errormsg="允许上传文件最大不能超过99M" />
          <span class="Validform_checktip"></span>
        </div>
        
        <div class="control-group">
          <label>允许上传文件最大大小:(<font color="red">单位:M,服务器限制上传最大大小{ini_get('upload_max_filesize')}</font>)</label>
          <input type="text" name="upload_file_max_size" value="{config_helper::get_config_value('upload_file_max_size')}" placeholder="" datatype="n1-2" nullmsg="请填写允许上传文件大小" errormsg="允许上传文件最大不能超过99M" />
          <span class="Validform_checktip"></span>
        </div>
        
        <div class="control-group">
          <label>允许上传多媒体最大大小:(<font color="red">单位:M,服务器限制上传最大大小{ini_get('upload_max_filesize')}</font>)</label>
          <input type="text" name="upload_media_max_size" value="{config_helper::get_config_value('upload_media_max_size')}" placeholder="" datatype="n1-2" nullmsg="请填写允许上传文件大小" errormsg="允许上传文件最大不能超过99M" />
          <span class="Validform_checktip"></span>
        </div>
        
        {*
        <div class="js_thumbBox">
        <div class="control-group">
          <label>生成缩略图条件:(<font color="red">单位:px</font>)</label>
                        上传图片宽度大于:<input type="text" name="upload_thumb_min_width" value="{config_helper::get_config_value('upload_thumb_min_width')}" placeholder="" datatype="n1-4" nullmsg="请填写上传图片宽度" errormsg="最大不能超过9999px" style="width:50px"/>
                        上传图片高度大于:<input type="text" name="upload_thumb_min_height" value="{config_helper::get_config_value('upload_thumb_min_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="{config_helper::get_config_value('upload_thumb_width')}" placeholder="" datatype="n1-4" nullmsg="请填写缩略图默认宽度" errormsg="缩略图默认宽度最大9999px" style="width:50px"/> × <input type="text" name="upload_thumb_height" value="{config_helper::get_config_value('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_water_min_width" value="{config_helper::get_config_value('upload_water_min_width')}" placeholder="" datatype="n1-4" nullmsg="请填写上传图片宽度" errormsg="最大不能超过9999px" style="width:50px"/>
         上传图片高度大于:<input type="text" name="upload_water_min_height" value="{config_helper::get_config_value('upload_water_min_height')}" placeholder="" datatype="n1-4" nullmsg="请填写上传图片高度" errormsg="最大不能超过9999px" style="width:50px"/>
          <span class="Validform_checktip"></span>
        </div>
        <div class="control-group">
          <label>水印类型:</label>
          <input type="radio" name="upload_water_type" class="js_waterType" value="1" {if config_helper::get_config_value('upload_water_type') == 1}checked{/if}> 文字
          <input type="radio" name="upload_water_type" class="js_waterType" value="2" {if config_helper::get_config_value('upload_water_type') == 2}checked{/if}> 图片
        </div>
        <div class="js_textBox" {if config_helper::get_config_value('upload_water_type') != 1}hidden{/if}>
            
        <div class="control-group">
          <label>水印文字:</label>
          <input type="text" name="upload_water_text" value="{config_helper::get_config_value('upload_water_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_water_color" id="js_waterColor" value="{config_helper::get_config_value('upload_water_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_water_size" value="{config_helper::get_config_value('upload_water_size')}" datatype="n1-2" nullmsg="请填写水印字体大小"  />
          <span class="Validform_checktip"></span>
        </div>
        
        </div>
        
        
        <div class="js_picBox {if config_helper::get_config_value('upload_water_type') != 2}hidden{/if}">
            {*
            <div class="control-group">
              <label>上传水印图片:(<font color="red">点击图片更换水印</font>)</label>
              <a href="javascript:void(0);" class="js_picBtn" title="点击更换水印"><img  src="{$smarty.const.SITE_URL}{config_helper::get_config_value('upload_water_path')}" width="100px"></a>
              <input type="file" name="upload_water_path" id="js_upload" value="{$config_info.value}"/>
            </div>
			*}
			
			<div class="control-group js_uploadBox">
            <label>上传水印图片:(<font color="red">建议水印图片为png、gif等透明格式</font>)</label>
            <div class="btn-upload">
            {$water_path = config_helper::get_config_value('upload_water_path')}
              <a href="javascript:void(0);"><i class="icon-upload"></i><span class="js_uploadText">上传</span>水印图片</a>
              <input class="js_cover js_upFile" type="file" name="upload_water_path">
            </div>
			
            <div class="js_showBox {if !$water_path}hidden{/if}"><img class="js_logoBox" src="{image($water_path)}" ></div>
            </div>
			
			<div class="control-group">
	          <label>水印透明度:(<font color="red">单位:%,数值越小越透明</font>)</label>
	          <input type="text" name="upload_water_opacity" value="{config_helper::get_config_value('upload_water_opacity')}" datatype="n1-2" nullmsg="请填写水印透明度" errormsg="水印透明度只能在0-100之间" />
	          <span class="Validform_checktip"></span>
	        </div>
            
  
        </div>
        
        <div class="control-group">
          <label>水印位置:</label>
          <select class="form-control width-middle" name="upload_water_position">
            <option value="1" {if config_helper::get_config_value('upload_water_position') == 1 }selected{/if}>顶部居左</option>
            <option value="2" {if config_helper::get_config_value('upload_water_position') == 2 }selected{/if}>顶部居中</option>
            <option value="3" {if config_helper::get_config_value('upload_water_position') == 3 }selected{/if}>顶部居右</option>
            <option value="4" {if config_helper::get_config_value('upload_water_position') == 4 }selected{/if}>中间居左</option>
            <option value="5" {if config_helper::get_config_value('upload_water_position') == 5 }selected{/if}>居中</option>
            <option value="6" {if config_helper::get_config_value('upload_water_position') == 6 }selected{/if}>中间居右</option>
            <option value="7" {if config_helper::get_config_value('upload_water_position') == 7 }selected{/if}>底部居左</option>
            <option value="8" {if config_helper::get_config_value('upload_water_position') == 8 }selected{/if}>底部居中</option>
            <option value="9" {if config_helper::get_config_value('upload_water_position') == 9 }selected{/if}>底部居右</option>
          </select>
        </div>
        
        
        </div>
                      
        <div class="control-group">
          <img style="display:none;" src="{$smarty.const.IMAGE_PATH}//loading.gif" />
          <input type="submit" class="btn btn-primary js_submit" value="保存" />
        </div>
    </form>
  </div>
  <!-- 内容区块 end -->
</div>
<!-- 主内容 end -->
<script  type="text/javascript"  src="{$smarty.const.JS_PATH}/upload.js"></script>
<script>
    KindEditor.ready(function(K) {
        var editor = K.editor({
            allowFileManager : false,
            uploadJson: "{U('Upload/image')}",
        });
        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_waterColor").bigColorpicker("js_waterColor");
  //提交表单合法性验证 
  $("#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_waterType").change(function(){
      var watermarkType = $(".js_waterType:checked").val();
    if(watermarkType == 1){
        $(".js_textBox").show();
        $(".js_picBox").hide();
    }else{
        $(".js_textBox").hide();
        $(".js_picBox").show();
    }
  });
  
  $(".js_submit").click(function(e){
    e.preventDefault();
    var phpMaxSize = "{ini_get('upload_max_filesize')}";
    var picMaxSize = $("input[name = upload_pic_max_size]").val();
    var fileMaxSize = $("input[name = upload_file_max_size]").val();
    var mediaMaxSize = $("input[name = upload_media_max_size]").val();
    
    if(parseInt(phpMaxSize) < picMaxSize){
        alert('系统限制最大上传大小不能超过'+phpMaxSize);
		$("input[name = upload_pic_max_size]").focus();
        return;
    }
    
    if(parseInt(phpMaxSize) < picMaxSize){
        alert('系统限制最大上传大小不能超过'+phpMaxSize);
		$("input[name = upload_pic_max_size]").focus();
        return;
    }
    
    if(parseInt(phpMaxSize) < mediaMaxSize){
        alert('系统限制最大上传大小不能超过'+phpMaxSize);
		$("input[name = upload_media_max_size]").focus();
        return;
    }
    $("#addform").submit();
  });
})
</script>
 
<!-- 主容器 end -->
{include file="Public/footer.html"}


四、使用方法

在项目的application/Common/Helper目录(没有Helper目录请自行创建)下建立Upload.class.php助手函数库,代码如下

    //获取上传类型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));
  }

}

getConfigValue是获取配置字段函数,具体函数如下:

    //获取配置字段
    function getConfigValue($field){
         if(!$field){
             return ;
         }
         $config = M('config');
         $config_info = $config->where(array('field' => $field))->find();
         if(!$config_info){
             return ;
         }else{
             return $config_info['value'];
         }
     }

在控制器里使用方法:

引入助手函数库

use Common\Helper\Upload;
调用上传函数
//$is_thumb 是否启用缩略图 ,$is_water是否启用水印
$pic_data = Upload::index($type='image', $is_thumb=0, $is_water=0);

$pic_data数组里返回有上传图片的路径url,如果上传失败,则会返回错误代码和错误信息。有了上传图片的路径就可以对上传图片进行入库等操作了。

注:为方便大家使用,特将核心代码打包上传,大家请点击“下载源码”按钮下载打包文件。

版权属于:够过瘾——挨踢男的葵花宝典

文章标签:thinkphp水印

文章链接:http://www.gouguoyin.cn/php/32.html

转载时必须以链接形式注明原始出处及本声明。

如果您觉得本文对您有所帮助,请小额赞助一下,我会优先回答您在使用过程中出现的问题,点此赞助

如有疑问或遇到技术问题,请加官方QQ群: 421537504   GoCMS官方交流群

文章点评:

表情

378条评论

  • wwwwww 17小时前
    好的好的
  • 小二爷 3周前
    试一试
  • shengg2 3周前
    很不错的资源,我来学习了
  • 面壁者 1月前
    咔咔咔咔咔咔
  • 凉笙丶 3月前
    haohao
  • suer1 4月前
    很好
  • 楚留香 4月前
    不错
  • 我就是某某某 5月前
    不错的
  • 展翅翱翔 5月前
    不错的
  • shab01a 5月前
    21
  • goucjteam 5月前
    看看,学习
  • 椰子 6月前
    急用
  • jasa 6月前
    打算下载试试看
  • decadent 7月前
  • agudamu 7月前
    我想下载
  • defugood 7月前
    正是我想要的
  • ggy 8月前
    bak
  • somexi 8月前
    看起来不错
  • 林维 8月前
    下载试试
  • qqww 10月前
    谢谢了,很有用,就等这样的插件了