tp5简单的图片上传

这里运用的是tp5的原始的图片上传功能如下：（1）增加了校验器验证图片格式，如果有兴趣的还可以添加大小等验证。（2）图片上传后显示图片。（3）等待更新的功能：图片上传实时预览，并将路径存入数据库。

一，创建index/controller/index.php控制器

<?php
namespace app\index\controller;
use think\Image;
use think\Controller;
class Index extends Controller
{

    // 文件上传表单
    public function index()
    {
        return $this->fetch();
    }

    // 图片上传处理
    public function picture()
    {

        // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('image');
        //校验器，判断图片格式是否正确
        if (true !== $this->validate(['image' => $file], ['image' => 'require|image'])) {
            $this->error('请选择图像文件');
        } else {
            // 移动到框架应用根目录/public/uploads/ 目录下
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            if ($info) {
                // 成功上传后 获取上传信息

                //存入相对路径/upload/日期/文件名
                $data = DS . 'uploads' . DS . $info->getSaveName();
                //模板变量赋值
                $this->assign('image', $data);
                return $this->fetch('index');
            } else {
                // 上传失败获取错误信息
                echo $file->getError();
            }
        }
    }

二，创建视图文件index/view/index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图像上传和处理示例</title>
    <style>
        body {
            font-family:"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size:16px;
            padding:5px;
        }
        .form{
            padding: 15px;
            font-size: 16px;
        }

        .form .text {
            padding: 3px;
            margin:2px 10px;
            width: 240px;
            height: 24px;
            line-height: 28px;
            border: 1px solid #D4D4D4;
        }
        .form select {
            padding: 5px;
            margin:2px 10px;
            width: 150px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #D4D4D4;
        }

        .form .btn{
            margin:6px;
            padding: 6px;
            width: 120px;

            font-size: 16px;
            border: 1px solid #D4D4D4;
            cursor: pointer;
            background:#eee;
        }
        .form .file{
            margin:6px;
            padding: 6px;
            width: 220px;

            font-size: 16px;
            border: 1px solid #D4D4D4;
            cursor: pointer;
            background:#eee;
        }

        a{
            color: #868686;
            cursor: pointer;
        }
        a:hover{
            text-decoration: underline;
        }
        h2{
            color: #4288ce;
            font-weight: 400;
            padding: 6px 0;
            margin: 6px 0 0;
            font-size: 28px;
            border-bottom: 1px solid #eee;
        }
        div{
            margin:8px;
        }

    </style>
</head>
<body>
<h2>图像上传和处理示例</h2>
<form method="post" enctype="multipart/form-data" class="form" action="{:url('picture')}">
    选择图像文件：<input type="file" class="file" name="image"><br/>
    <input type="submit" class="btn" value=" 提交 ">
</form>
<div style="width: 200px;height: 500px;">
    <img src="{$image}"/>
</div>
</body>
</html>

第三,创建上传文件夹public/uploads

tp5简单的图片上传

猜你喜欢