tp5使用ajax上传图片

2021-10-12 09:54:28

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
</head>
<body>

        <p>
         商品图片   <input type="file" class="img">
        </p>
        <p>
            商品名称 <input type="text" class="goods_name">
        </p>
        <p>
            商品单价 <input type="number" class="price">
        </p>
        <p>
            商品数量 <input type="number" class="num">
        </p>
       <p>
           商品分类 <select name="" id="cate_one">
           {foreach $data as $v}
           <option value="{$v.tid}">{$v.type_name}</option>
           {/foreach}
                    </select>
           <select class="tid" id="cate_two">
               <option value="">--第二级--</option>
           </select>
       </p>
       <p>
           <input type="submit" value="添加" class="sib">
       </p>
        <input type="hidden" class="image">



</body>
</html>
<script>
$("#cate_one").change(function () {
//获取一节分类的value值
var tid = $(this).val();
//发送ajax请求
$.ajax({
url:"{:url(‘/info‘)}",/*此处写的是tp框架中的路由 如果看不懂也可以直接找路径*/
type:‘post‘,
data:{tid:tid},
dataType:‘json‘,
success:function (res) {
//如果ajax发送成功 并且 code值等于200
if (res.code ==0){
//提前定义好下级菜单
var str = ‘‘;
//循环后端返回来的数据并赋值
$.each(res.data,function (k,v) {
str += ‘<option value="‘+v.tid+‘">‘+v.type_name+‘</option>‘
})
//替换页面中的二级分类标签
$("#cate_two").html(str);
}
}
})
})
$(‘.img‘).change(function () {
    var files = $(this).prop(‘files‘);
    var data = new FormData();
    data.append(‘img‘, files[0]);
    $.ajax({
        url: "{:url(‘admin/Goods/img‘)}"
        , type: "POST"
        , success: function (res) {
            if (res.code==0){
                $(‘.image‘).val(res.data)

            }
        },
        data: data,
        cache: false,
        processData: false,
        contentType: false
    })
})

$(‘.sib‘).click(function () {
    var goods_name = $(‘.goods_name‘).val()
    var price = $(‘.price‘).val()
    var num = $(‘.num‘).val()
    var tid = $(‘.tid‘).val()
    var img=$(‘.image‘).val()
    $.get("{:url(‘admin/Goods/create‘)}",{tid: tid, goods_name: goods_name, num: num, price: price,img:img},function (res) {
        if (res.code==0){
            alert(res.msg)
            location.href="{:url(‘admin/Goods/show‘)}"
        }else{
            alert(res.msg)
        }
    },‘json‘)
})

</script>
后端处理

<?php

namespace app\admin\controller;

use think\Controller;
use think\Request;
use think\Validate;
use tools\jwt\Token;

class Goods extends Base
{
    /**
     * 显示资源列表
     *
     * @return \think\Response
     */
    public function index()
    {
        $data = \app\admin\model\Type::where(‘pid‘, 0)->select();
        return view(‘Add/add‘, [‘data‘ => $data]);
    }
    public function info()
    {
        $where[‘pid‘] = input(‘tid‘);
        $data = \app\admin\model\Type::where($where)->select();
        return json([‘code‘ => 0, ‘data‘ => $data, ‘msg‘ => ‘ok‘]);
    }
    /**
     * 显示创建资源表单页.
     *
     * @return \think\Response
     */
    public function create()
    {
        $data = input();
//        var_dump($data);die();
        foreach($data as $k=>$v){
            $data[$k]=htmlspecialchars($v);
        }
        $validate = new Validate([
            ‘goods_name|商品名称‘ => ‘require‘,
            ‘price|单价‘ => ‘require‘,
            ‘num|数量‘ => ‘require‘,
            ‘tid|分类‘ => ‘require‘,
        ]);
        if (!$validate->check($data)) {
            return   json([‘code‘=>1,‘msg‘=>$validate->getError()]);
        }
        $res = \app\admin\model\Goods::create($data,true);
        if ($res) {
            return   json([‘code‘=>0,‘msg‘=>‘添加成功‘]);

        } else {
            return   json([‘code‘=>1,‘msg‘=>‘添加失败‘]);
        }
    }
    public function img(){
        $file = request()->file(‘img‘);
        // 移动到框架应用根目录/public/uploads/ 目录下
        if ($file) {
            $info = $file->validate([‘ext‘ => ‘png,jpg,jpeg‘])->move(ROOT_PATH . ‘public‘ . DS . ‘image‘);
            if ($info) {
                // 成功上传后 获取上传信息
                // 输出 jpg
                $img = DS . "image" . DS . $info->getSaveName();
                $image = \think\Image::open(‘.‘.$img);
                $image->thumb(200, 200)->save(‘.‘.$img);
                return json([‘code‘=>0,‘msg‘=>‘文件上传成功‘,‘data‘=>$img]);
            } else {
                // 上传失败获取错误信息
                return  json([‘code‘=>1,‘msg‘=>$file->getError()]);
            }
        }
    }
    public function show(){
        $sou=input(‘sou‘);
        $where=[];
        $query=[‘query‘=>[]];
        if ($sou){
            $where[‘goods_name‘]=[‘like‘,"%$sou%"];
            $query[‘query‘]=[‘sou‘=>$sou];
        }
        $data=\app\admin\model\Goods::where($where)->paginate(3,false,$query);
        $str=$query;
        return view(‘Add/show‘,[‘data‘=>$data,‘str‘=>$str]);
    }
    /**
     * 保存新建的资源
     *
     * @param  \think\Request  $request
     * @return \think\Response
     */
    public function save(Request $request)
    {
        //
    }
    /**
     * 显示指定的资源
     *
     * @param  int  $id
     * @return \think\Response
     */
    public function read($id)
    {
        //
    }
    /**
     * 显示编辑资源表单页.
     *
     * @param  int  $id
     * @return \think\Response
     */
    public function edit($id)
    {
        //
    }
    /**
     * 保存更新的资源
     *
     * @param  \think\Request  $request
     * @param  int  $id
     * @return \think\Response
     */
    public function update(Request $request, $id)
    {
        $id=input(‘id‘);
        $res=\app\admin\model\Goods::where(‘id‘,$id)->find();
        if ($res[‘state‘]==0){
            $state=1;
        }else{
            $state=0;
        }
        $data=\app\admin\model\Goods::where(‘id‘,$id)->update([‘state‘=>$state]);
        return json([‘code‘=>0,‘msg‘=>‘ok‘]);
    }
    /**
     * 删除指定资源
     *
     * @param  int  $id
     * @return \think\Response
     */
    public function delete($id)
    {
        //
    }
}

tp5使用ajax上传图片

码农公寓

相关文章