zoukankan      html  css  js  c++  java
  • thinkphp使用ajax单图上传

    1.form表单

    <div class="layui-form-item">
        <label class="layui-form-label">商品主图</label>
        <div class="layui-input-block">
            <a id="btn-thumb"><img src="/static/index/images/thumb.jpg" id="thumb-preview" style="cursor:pointer;100px; height:100px;"></a>
            <!-- 路径 -->
            <input type="hidden" name="goods_thumb" id="input-thumb" value="">
            <button class="layui-btn layui-btn-danger" lay-filter="demo1" id="cancel" type="button">删除图片</button>
        </div>
    </div>

    2.ajax代码

    <script>
            //主图上传
            layui.use('upload', function(){
                var $ = layui.jquery;
                var upload = layui.upload;
                var uploadInst = upload.render({
                    elem:'#btn-thumb',
                    url: "{:url('/seller_Goods/upload')}",
                    size:2500,
                    exts: 'jpg|png|jpeg',
                    before: function(obj){
                        obj.preview(function(index,thumb, result){
                            $('#thumb-preview').attr('src',result);
                        });
                    },
                    done: function(res){
                        console.log(res);
                        if(res.code == 0){
                            return layer.msg(res.message);
                        }
                        $('#input-thumb').val(res.filepath);
                    }
                });
            });
    </script>

    3.控制器

        //通用多图上传接口
        public function upload()
        {
           if($this->request->isPost()){
                 $res['code']=1;
                 $res['msg'] = '上传成功!';
                 $file = $this->request->file('file');
                 $info = $file->move('./upload/store_goods/');
                 if($info){
                     $res['name'] = $info->getFilename();
                     $res['filepath'] = '/'.str_replace('\','/',$info->getSaveName());
                 }else{
                     $res['code'] = 0;
                     $res['msg'] = '上传失败!'.$file->getError();
                 }
                 return $res;
            }
        }
    
        //多图删除头像
        public function delimg(){
            $imgurl=input('imgurl');
            $imgurl='./upload/store_goods'. $imgurl;
            $res=unlink($imgurl);
            if($res){
                echo 1; //删除文件成功
            }else{
                echo 2;//删除文件失败
            }
        }
  • 相关阅读:
    MyEclipse中的Tomcat跑大项目时内存溢出:permgen space
    MyEclipse新建工作空间后的配置详细步骤
    解决eclipse复制粘贴js代码卡死的问题
    eclipse复制工作空间配置
    maven项目检出后报错(包括编译报错和运行报错)的常见检查处理方式
    MyEclipse中引用的maven配置文件只访问私服的配置
    图标网站
    afasf
    一个权限管理模块的设计(转载)
    奇艺下载
  • 原文地址:https://www.cnblogs.com/seanpan/p/13992948.html
Copyright © 2011-2022 走看看