CI中图片上传

最新推荐文章于 2021-03-13 06:56:22 发布
原创最新推荐文章于 2021-03-13 06:56:22 发布 · 788 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#CI
文件上传同时被 2 个专栏收录
12 篇文章
订阅专栏
6 篇文章
订阅专栏
admin.html


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片上传</title>
</head>
<body>
<center>
    <table border="1">
        <h2>图片上传</h2>
        <form action="<?php echo site_url('Welcome/upload') ?>" method="post" enctype="multipart/form-data">
            <tr>
                <td>图片上传</td>
                <td> <input type="file" name="file"/></td>
            </tr>
            <tr>
                <td>图片描述</td>
                <td><input type="text" name="name"/></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="上传"/></td>
            </tr>
        </form>
    </table>
</center>

</body>
</html>



Welcome.php


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {
    public  function __construct(){
        parent::__construct();
    }
   public function index()
   {
      $this->load->view('admin.html');
   }
    public  function upload(){
        //描述
        $name=$this->input->post("name");
        //配置
        $config['upload_path'] = './public/uploads/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '1024*10';
        $config['max_width']  = '1024';
        $config['max_height']  = '768';
        $config['file_name']  = time(); //文件名不使用原始名
        $this->load->library('upload', $config);
        if(!$this->upload->do_upload('file')) {
            echo $this->upload->display_errors();
        }else{
            $data['file']=$this->upload->data();  //文件的一些信息
            $img=$data['file']['file_name'];  //取得文件名
            $img= $config['upload_path'].$img;
            $sql="insert into img (img,name) values('$img','$name')";
            $res=$this->db->conn_id->exec($sql);
            if($res){
                redirect("Welcome/show_upload");
            }else{
                echo "上传图片失败";
            }
        }
    }

    /**
     * 图片展示
     */
    public  function  show_upload(){
        $name=$this->input->post("name");
        $where=1;
        if($name!=""){
            $where.=" and  name like '%$name%'";
        }
        $img=$this->db->conn_id->query("select * from img where $where limit 5 ")->fetchALL(PDO::FETCH_ASSOC);
        $this->load->vars("img",$img);
        $this->load->view("admin_show_upload.html");
    }
    public  function  show(){
        $img=$this->db->conn_id->query("select * from img order by id desc limit 5 ")->fetchALL(PDO::FETCH_ASSOC);
        $this->load->vars("img",$img);
        $this->load->view("lunbo.html");
    }
}

admin_show_upload.html


<!DOCTYPE html>
<html class="aa">
<head lang="en">
    <meta charset="UTF-8">
    <title>后台图片展示</title>
    <base href="<?php echo base_url('./public/uploads') ?>"/>
</head>
<body>
<center>

<tr>
    <td>描述 <input type="text" name="name" id="name"/></td>
    <td><button id="button">搜索</button></td>
</tr>
<br/>
<tr>
    <td><a href="<?php echo site_url('Welcome/index') ?>">添加</a></td>
    <td><span id="order"style="cursor:pointer">排序</span></td>
</tr>
<table border="1">
    <tr>
        <td>图片ID</td>
        <td>图片描述</td>
        <td>图片展示</td>
    </tr>
    <tbody>
    <?php foreach ($img as $key => $val): ?>
    <tr>
        <td><?php echo $val['id'] ?></td>
        <td><?php echo $val['name'] ?></td>
        <td><img src="<?php echo base_url().$val['img'] ?>" width="60px"/></td>
    </tr>
    <?php endforeach ?>
    </tbody>
</table>

</center>
</body>
</html>
<script src="jq.js"></script>
<script>
//    $("#order").click(function(){
//        var order=$("#order").text();
//       if(order=='排序'){
//           var order = 1;
//           $.get()
//       }
//    })
//搜索

    $("#button").click(function(){
        var name=$("#name").val();
        $.post("<?php echo site_url('Welcome/show_upload') ?>",{name:name},
                function(data){
                   $(".aa").html(data);
        });
    })
</script>


lunbo.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <base href="<?php echo base_url('./public/') ?>"/>
    <script src="jq.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            margin: 30px;
        }
        li{
            list-style: none;
        }
        .box{
            width:500px;
            height: 600px;
            border:3px solid #808080;
            position: absolute;
            overflow: hidden;/*此处需要将溢出框架的图片部分隐藏*/
            text-align: center;
        }
        img{
            width:500px;
            height: 600px;
        }
        .box ul{
            width: 2500px;
            position: absolute;
        }
        .box ul li{
            float: left;/*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
            width: 500px;
            height: 600px;
        }
        .box ol{
            width: 150px;
            position: absolute;/*用绝对定位给数字按钮进行布局*/
            right: 10px;
            bottom: 10px;
        }
        .box ol li{
            float: left;
            margin-left: 4px;
            width: 25px;
            height: 25px;
            text-align: center;
            margin-left: 4px;
            line-height: 25px;
            background-color: #6dbfff;
            color: #ffffff;
            cursor: pointer;
        }
        .box .current{
            background: #000000;
        }
    </style>
</head>
<body>
<div class="box">
    <!--图片布局开始-->
    <ul>
        <?php foreach ($img as $key=>$val): ?>
        <li><a href="javascript:void(0)"><img src="<?php echo base_url().$val['img'] ?>"></a></li>
        <?php endforeach ?>
    </ul>
    <!--按钮布局开始-->
    <ol>
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
</body>
<script>
    $(document).ready(function(){
        //文字效果
        var oList=$(".box ol li");
        var uList=$(".box ul");
        //定义一个计数器；
        var _now=0;
        oList.click(function(){
            $(this).addClass("current").siblings().removeClass("current");
            var _index=$(this).index();
            var limit= -(_index*500);
            //图片滚动
            uList.animate({left: limit},"slow");
        })
        //定义一个定时器
        var timer=setInterval(autoPlay,500);
        function autoPlay()
        {
            if(_now<5){
                oList.eq(_now).addClass("current").siblings().removeClass("current");
                uList.animate({left:-(_now*500)},"10000");
                _now++;
            }
            else
            {
                _now=0;
                oList.eq(_now).addClass("current").siblings().removeClass("current");
                uList.animate({left:-(_now*500)},"10000");
            }
        }
        $(".box").mouseenter(function(){
            clearInterval(timer);
        }).mouseleave(function(){
            timer=setInterval(autoPlay,1000);
        })
    })
</script>
</html>
CI中 图片上传

CI中图片上传
