基于ThinkPHP5.0实现图片上传插件

前端之家收集整理的这篇文章主要介绍了基于ThinkPHP5.0实现图片上传插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果预览图:

插件主要功能是:可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间。

一、下载附件

地址:链接: 密码: 4pbu

二、将附件中的CropAvatar.php放到自己程序目录extend/org目录下,如果遇到 exif_imagetype 错误,需要打开 php.ini 中的 extension=php_exif.dll

三、common.php公共函数

找到应用程序目录下的common.php文件,在里面添加公用函数:

四、修改配置文件

找到应用程序目录下的配置文件config.php,在配置里面添加:

[ //缩图保存位置 'thumb' => './uploads/thumbs',//附件图片保存位置 'image' => './uploads/images',//裁剪的原始图片保存位置 'original' => './uploads/original',//上传限制 2*1024*1024 'size' => 2097152,],

五、将file-thumd-modal.html文件放到view文件夹里面,作为一个模板文件,如:

六、控制器,附件中的Thumbs.php文件是一个示例控制器,可以将该控制器拿到你的程序目录下,修改下命名空间、方法名等,该控制器里面有个方法为:index(),该方法是上传文件调用的方法,如果想要显示一个选择文件的页面还需自己写个操作方法,如:test()。

fetch(); } public function index() { ..... }

七、视图层,在view文件夹里定义一个与test方法相关的模板文件,该页面的标签里面需要加上class="page-header-fixed",因为JS里面需要使用到。这个标签用来打开模态框,class为avatar-view,{include file="public/file-thumd-modal"}用来引入file-thumd-modal.html文件,需要找到该模板文件写地址。

PHP;"> //id="art-thumb" 返回的图片地址 //id="preview" 返回的 img 小图 //该页面需引入bootstrap的js,css和jquery等文件
图片
调用 avatar-view} 图片
{// file-thumd-modal.html 可以引用到其他页面要用到的地方} {// 引入上传图片modal} {include file="public/file-thumd-modal"}

猜你在找的ThinkPHP相关文章