tp5实现文件上传图片到数据库，并显示到页面。

最新推荐文章于 2022-02-17 19:17:26 发布

刘默生

最新推荐文章于 2022-02-17 19:17:26 发布

阅读量2.9k

点赞数 2

分类专栏： php 文章标签： php

本文链接：https://blog.csdn.net/weixin_43811134/article/details/104091556

版权

php 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

思路：
1、html中一个form表单，里面编写一个单个的name=file的input框，
2、编写控制器上传到数据库的方法，要记着创建模型。
3、遍历数据库中的所有图片。

html内容：提交图片方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<h3>文件上传</h3>
<form action="{:url('home/home/upload')}" class="demo" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <br>
    <br>
    <br>
    <button type="button">上传</button>
</form>
</body>
</html>
<script>
    // 文件上传js
    $("button").click(function(){
        // 判断不允许为空
        if($("input[name=file]").val() == ""){
            alert("亲，不允许为空哦！");
            return false;
        }
        $(".demo").submit();
    })
</script>

控制器方法：图片上传，和读取图片。

// 文件上传
    public function upload(Request $request){

        // 接受前端传递过来的变量
        $file = $request->file('file');

        // 判断是否存在
        if($file){
            // 移动目录,同时添加验证
            $info = $file->validate(['ext'=>"jpg,jpeg,png,gif"])->move(ROOT_PATH . "public" . DS . "upload");
            // move返回的是一个布尔类型
            if($info){
                // 拼接url 传递到数据库
                $url = DS . "upload" . DS . $info->getSaveName();
                // 因为我的数据表名不是url所以转换一下
                $data['upload'] = $url;
                // 存入到数据库
                \app\home\model\Upload::create($data,true);
                // 上传成功跳转页面
                $this->success("上传成功","home/home/index");
            }else{
                $file->getError();
            }
        }
    }

    // 读取文件
    public function duqu(){

        $data = \app\home\model\Upload::select();

        return view("home/upload",['data'=>$data]);
    }

前台读取显示页面；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width:200px;
            height: 200px;
            border:1px solid #ff0000;
            margin:10px;
        }
    </style>
</head>
<body>
{foreach $data as $v}
    <img src="{$v.upload}"  alt="">
{/foreach}
</body>
</html>

附上我的sql表
在这里插入图片描述
简单的一个图片上传，如果想要多个文件上传，可以在页面表单提交时加上一个file[]，然后在控制器方法中天一个foreach遍历数组，别的就可以不用修改，
框架中使用文件上传还是短信注册相对来说容易的很多，但是我们也需要锻炼自己即使没有框架也可以写出文件上传，并且上传到数据库，而且还可以读取的效果。

刘默生

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
tp5实现文件上传图片到数据库，并显示到页面。

思路：1、html中一个form表单，里面编写一个单个的name=file的input框，2、编写控制器上传到数据库的方法，要记着创建模型。3、遍历数据库中的所有图片。html内容：提交图片方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt...
复制链接

扫一扫

专栏目录