zoukankan      html  css  js  c++  java
  • tp5项目图片上传

    控制器

        public function upload(){
            $file = request()->file('file');
            $arr =[];
            if($file){
                $info = $file->validate(['ext'=>'jpg,png,gif'])->move(ROOT_PATH.'public'.DS.'uploads');
                if($info){
                    $arr['code'] = 1;
                    $arr['msg'] = '/uploads/'.$info->getSaveName();
                    
                }else{
                    $arr['code'] = 2;
                }

            }else{
                $arr['code'] = 3;
            }
            return $arr;
        }
        //图片上传,ROOT_PATH表示根目录,DS表示点,getSaveName()为图片上传后的名字
    视图html
    <div class="layui-form-item">
                        <label class="layui-form-label">一队图片</label>
                        <div class="layui-input-block">
                          <button type="button" class="layui-btn" id="test2" >
                            上传图片
                          </button>
                          <img src="" alt="" id="img1">
                          <input type="hidden" name="img1" id="imgg1" value="">
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">二队图片</label>
                        <div class="layui-input-block">
                          <button type="button" class="layui-btn" id="test3" >
                            上传图片
                          </button>
                          <img src="" alt="" id="img2">
                          <input type="hidden" name="img2" id="imgg2" value="">
                        </div>
                      </div>
     <script>
    layui.use('upload', function(){
            var upload = layui.upload;
       
              //执行实例
            var uploadInst = upload.render({
              elem: '#test2' //绑定元素
              ,url: '{:url("Add/upload")}' //上传接口
              ,done: function(res){
              //上传完毕回调
              if(res.code == 1){
                document.getElementById('img1').src = res.msg;
                document.getElementById('imgg1').value = res.msg;
              }
            }
            ,error: function(){
            //请求异常回调
            }
          });
        });
        layui.use('upload', function(){
            var upload = layui.upload;
       
              //执行实例
            var uploadInst = upload.render({
              elem: '#test3' //绑定元素
              ,url: '{:url("Add/upload")}' //上传接口
              ,done: function(res){
              //上传完毕回调
              if(res.code == 1){
                document.getElementById('img2').src = res.msg;
                document.getElementById('imgg2').value = res.msg;
              }
            }
            ,error: function(){
            //请求异常回调
            }
          });
        });
        </script>
  • 相关阅读:
    力扣(LeetCode)67. 二进制求和
    力扣(LeetCode) 66. 加一
    力扣(LeetCode)58. 最后一个单词的长度
    力扣(LeetCode)1009. 十进制整数的反码
    力扣(LeetCode) 20. 有效的括号
    力扣(LeetCode)1016. 子串能表示从 1 到 N 数字的二进制串
    数据库索引
    OSI 七层和五层
    ST算法
    F
  • 原文地址:https://www.cnblogs.com/HighKK/p/13496342.html
Copyright © 2011-2022 走看看