社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
编辑上传配置信息
首頁 php教程 php手册 THINKPHP3.2.3实现后台自定义图片上传配置

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 06, 2016 pm 07:38 PM
上傳 後台 圖片 實現 自訂

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
登入後複製
THINKPHP3.2.3实现后台自定义图片上传配置
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前 By DDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7313
9
Java教學
1625
14
CakePHP 教程
1348
46
Laravel 教程
1260
25
PHP教程
1207
29
顯示更多
Related knowledge
小紅書發布自動儲存圖片怎麼解決？發布自動保存圖片在哪裡？ 小紅書發布自動儲存圖片怎麼解決？發布自動保存圖片在哪裡？ Mar 22, 2024 am 08:06 AM

小紅書發布自動儲存圖片怎麼解決？發布自動保存圖片在哪裡？

抖音評論裡怎麼發圖片？評論區圖片入口在哪裡？ 抖音評論裡怎麼發圖片？評論區圖片入口在哪裡？ Mar 21, 2024 pm 09:12 PM

抖音評論裡怎麼發圖片？評論區圖片入口在哪裡？

在 iPhone 上讓圖片更清晰的 6 種方法 在 iPhone 上讓圖片更清晰的 6 種方法 Mar 04, 2024 pm 06:25 PM

在 iPhone 上讓圖片更清晰的 6 種方法

ppt怎麼讓圖片一張一張出來 ppt怎麼讓圖片一張一張出來 Mar 25, 2024 pm 04:00 PM

ppt怎麼讓圖片一張一張出來

福昕PDF閱讀器如何將pdf文件轉成jpg圖片-福昕PDF閱讀器將pdf文件轉成jpg圖片的方法 福昕PDF閱讀器如何將pdf文件轉成jpg圖片-福昕PDF閱讀器將pdf文件轉成jpg圖片的方法 Mar 04, 2024 pm 05:49 PM

福昕PDF閱讀器如何將pdf文件轉成jpg圖片-福昕PDF閱讀器將pdf文件轉成jpg圖片的方法

華為手機如何實現雙微信登入？ 華為手機如何實現雙微信登入？ Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入？

wps文檔中兩張圖片怎麼並排 wps文檔中兩張圖片怎麼並排 Mar 20, 2024 pm 04:00 PM

wps文檔中兩張圖片怎麼並排

網頁圖片載入不出來怎麼辦？ 6種解決辦法 網頁圖片載入不出來怎麼辦？ 6種解決辦法 Mar 15, 2024 am 10:30 AM

網頁圖片載入不出來怎麼辦？ 6種解決辦法

See all articles