请选择 进入手机版 | 继续访问电脑版

资源299论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

日本代购,韩国代购,专业海外代购服务
查看: 62|回复: 0

TP后台上传图片结合Layui的ajax提交

[复制链接]

603

主题

661

帖子

2157

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2157
发表于 2019-7-29 14:19:59 | 显示全部楼层 |阅读模式
先领券再购物更优惠
TP后台上传图片结合Layui的ajax提交
首先先看下html代码:我们主要呈现的是这个上传图片的提交

<form class="layui-form" action="" autocomplete="off" id="editstatus">
     <input type="hidden" name="id" value="<{$info.id}>" id="id">
     <input type="hidden" name="userid" value="<{$info.userid}>">
     <input type="hidden" name="tkmoney" value="<{$info.tkmoney}>">
     <div class="layui-form-item">
          <div class="layui-upload">
               <button type="button" class="layui-btn" id="test1">上传图片</button>
               <div class="layui-upload-list">
                   <div style="width: 250px;margin: 0 auto">
                        <input type="hidden" name="image" lay-filter="required" id="wx_img" autocomplete="off"  class="layui-input" value="<{$info.image}>">
                        <img class="layui-upload-img" style="width: 100%" src="<{$info.image}>" id="demo1">
                        <p id="demoText"></p>
                   </div>
               </div>
          </div>
     </div>

</form>
那么接下来看出问题的时候js代码:因为前端页面的是Layui这个框架。

<script>
    layui.use(['upload'], function () {
        var upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'//上传图片的按钮id
            ,url: '<{:U("Withdrawal/uploadImg")}>'//走的路径是Withdrawal控制器下的uploadImg方法
            ,before: function(obj){
                //预读本地文件示例,不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接(base64)
                });
            }
            ,done: function(res){
                console.log(res);
                //如果上传失败
                $('#wx_img').val(res['data']);
                return layer.msg(res['msg']);
                //上传成功
            }
            ,error: function(){
                //演示失败状态,并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


    });
</script>
相关的注释都写在对应的代码语句旁边.不清楚或者有问题的可以评论区留言!

接下来,看一下后台控制器的方法(上传图片的方法):

public function uploadImg()
    {

        if (IS_POST) {
            $id = I('id');//当前这条数据的表id
            $upload           = new \Think\Upload();//实例化
            $upload->maxSize  = 5097152;//最大值
            $upload->exts     = array('jpg', 'gif', 'png');//图片格式
            $upload->savePath = '/withdrawal/';//上传图片的文件夹位置
            $info             = $upload->uploadOne($_FILES['file']);

            if (!$info) {
                // 上传错误提示错误信息
                $this->error($upload->getError());
            } else {
                //上传图片
                $data = [
                    'image' => 'Uploads' . $info['savepath'] . $info['savename'],
                    'upload_time'=>time()//上传时间
                ];
                //插入对应的id的里面的数据
                $res = M("Tklist")->where(['id' =>$id])->save($data);
                if($res) {
                    $this->ajaxReturn(['status' => $res, 'msg' => '上传成功', 'data' => $data['image']]);
                } else {
                    $this->ajaxReturn(['status' => 0, 'msg' => '上传失败', 'data' => '']);
                }
            }
        }
    }
好了,如果这时候这样子做,会出现问题,上传失败!

为什么?

因为此时控制器那边的$id为空!

导致我们后面save的时候,走到下面的判断,上传失败!

究其原因,就是前台提交到这个方法的时候,没有把这条数据的id一起提交过来

那么现在我们先进行对刚才的js代码进行分析并找到问题的突破口,注意看!

我们从出事情的地方看起,也就是这个地方,他提交走到上传图片的方法


这里就是问题的突破口,在这里拿到id就可以!

好!准备开始改写代码:

layui.use(['upload'], function () {
        var upload = layui.upload;
        //获取当前数据的表id 然后跟随着上传的方法 提交到后台控制器
        var id = $('#id').val()
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '<{:U("Withdrawal/uploadImg")}>'
            ,data:{id},//当前数据的id
            before: function(obj){
                //预读本地文件示例,不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接(base64)
                });
            }
            ,done: function(res){
                console.log(res);
                //如果上传失败
                $('#wx_img').val(res['data']);
                return layer.msg(res['msg']);
                //上传成功
            }
            ,error: function(){
                //演示失败状态,并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


    });
此时代码已经能用了,业务能走了,我们改写了什么呢?



就是这两个地方,我们给html代码那边的id 设置一个id  id="id"

然后在js这边中声明一个变量存放他的值   $("#id").val();

然后在提交那边进行接收值  data:{id}

到这边,就能把id提交到后台的方法中,实现上传成功!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /3 下一条

QQ|Archiver|手机版|小黑屋|资源299论坛

GMT+8, 2019-8-26 13:26 , Processed in 0.030595 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表