精华内容
下载资源
问答
  • laravel使用Layui框架文件上传 运行环境: 1、laravel6+layui2.5.5。 重点: 1、token。禁用上传页面的token。 2、Js中设置field。 代码 禁用token: 修改VerifyCsrfToken.php文件 protected $except = [ // 'new...

    laravel使用Layui框架文件上传

    运行环境:

    1、laravel6+layui2.5.5。

    重点:

    1、token。禁用上传页面的token。
    2、Js中设置field。

    代码

    禁用token:

    修改VerifyCsrfToken.php文件

    protected $except = [
        //
        'newtask_att_up'
    ];
    

    控制器:

    public function newtask_att_up(Request $request)
    {
        $file = $request->file('file');//获取文件,与layui中的js的配置 field:'file'。一致。
        $allowed_extensions = ["txt"]; //多类型
        //判断文件是否是允许上传的文件类型
        if ($file->getClientOriginalExtension()&&!in_array($file->getClientOriginalExtension(),$allowed_extensions))
        {
            $data=[
                'status'=>0,//返回状态码,在js中用改状态判断是否上传成功。
                'msg'=>'不支持此格式'
            ];
            return json_encode($data);
        }
    
        //保存文件,新建路径,拷贝文件
        $path=date('Y/m/d/',time());
        $destinationPath ='uploads/'.$path;
        is_dir($destinationPath) or mkdir($destinationPath,0777,true);
        $extension = $file->getClientOriginalExtension();
        $fileName = md5(mt_rand() . time()) . '.' . $extension;
        $file->move($destinationPath,$fileName);
        $data=[
            'status'=>1,//返回状态码,在js中用改状态判断是否上传成功。
            'msg'=>$destinationPath.$fileName,//上传成功,返回服务器上文件名字
            'originalname'=>$file->getClientOriginalName()//上传成功,返回上传原文件名字
        ];
        return json_encode($data);
    
    }
    

    blade视图代码

    加粗、斜体部分是修改或新增的。

    <div class="layui-form-item">
        <label class="layui-form-label">文件</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr><th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr></thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>
        </div>
       ***<input type="hidden" id="task_att" name='task_att' value="" />//保存新的文件名
       <input type="hidden" id="task_att_original" name='task_att_original' value="" />//保存原文件名***
    

    js代码

    加粗、斜体部分是修改或新增的。

    //多文件列表示例
    var demoListView = $('#demoList')
        ,uploadListIns = upload.render({
        elem: '#testList'
        ,url: "{{url('newtask_att_up')}}" //改成您自己的上传接口。
        ,accept: 'file'
        ,multiple: true
        ***,field:'file'//对应控制器中的第一行。$file = $request->file('file');***
        ,auto: false
        ,bindAction: '#testListAction'
        ,choose: function(obj){
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function(index, file, result){
                var tr = $(['<tr id="upload-'+ index +'">'
                    ,'<td>'+ file.name +'</td>'
                    ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                    ,'<td>等待上传</td>'
                    ,'<td>'
                    ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                    ,'</td>'
                    ,'</tr>'].join(''));
    
                //单个重传
                tr.find('.demo-reload').on('click', function(){
                    obj.upload(index, file);
                });
    
                //删除
                tr.find('.demo-delete').on('click', function(){
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                });
    
                demoListView.append(tr);
            });
        }
        ,done: function(res, index, upload){
            if(res.status){ //上传成功
                //将文件名信息添加到隐藏的input框中。
                //先获取现在的文件名,然后将上传的文件名追加到刚才的文件名中
                ***var newfilename = $('#task_att').val();
                newfilename = newfilename + ',,,,,,' + res.msg;
                $("#task_att").val(newfilename);
                var newfilename_original = $('#task_att_original').val();
                newfilename_original = newfilename_original + ',,,,,,' + res.originalname;
                $("#task_att_original").val(newfilename_original);***
    
    
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                tds.eq(3).html(''); //清空操作
                return delete this.files[index]; //删除文件队列已经上传成功的文件
            }
            this.error(index, upload);
        }
        ,error: function(index, upload){
            var tr = demoListView.find('tr#upload-'+ index)
                ,tds = tr.children();
            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
    });
    
    展开全文
  • laravel 使用layui 数据表格 1、controller端分页 js部分照着layui文档设置就行 $users = DB::table('users')->paginate(90)->toJson(); return view('user.index',compact('users')); //为什么是90条呢?...

    laravel 使用layui 数据表格
    根据数据状态展示按钮
    别忘了在花括{{号前加@,否则双花括号会被解析成blade语法导致报错

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
            @{{#  if(d.recall ==1){ }}//别忘了在花括号前加@,否则双花括号会被解析成blade语法导致报错
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            @{{#  } }}
        </script>
    

    https://www.layui.com/doc/modules/table.html#templet
    在这里插入图片描述

    展开全文
  • laravel使用layui进行图片上传

    万次阅读 2018-12-03 14:35:45
    图片上传很多开发者都会遇到过,而一般为了用户体验性,我们图片上传都会做成无刷新提交,而最简单的是表单提交,但是用户体验性差,本篇博客就给大家介绍利用第三方插件layui实现图片无刷新提交。  博主介绍的...

           图片上传很多开发者都会遇到过,而一般为了用户体验性,我们图片上传都会做成无刷新提交,而最简单的是表单提交,但是用户体验性差,本篇博客就给大家介绍利用第三方插件layui实现图片无刷新提交。

           博主介绍的图片无刷新提交,其实也算是一种刷新提交,但是利用的是弹窗刷新(也就是子页面),主页面不刷新,从而转移了刷新的主体。博主的思路是这样的,我们点提交图片,弹出一个弹窗,这个弹窗就是实现基本的上传图片,后端接收到图片保存并返回图片路径给前端,前端再点提交,从而实现无刷新提交图片。

          下面为大家介绍实现过程(记得先引用layui的JS跟Css文件,传送门layui):

          一、先定义好我们的理由,代码如下(根据个人风格不同,路由格式也不同):

    Route::group(['prefix' => 'admin'], function () {
       //头像上传
       Route::post('blogUploadImg', 'Admin\UploadsController@blogUploadImg');
    });

           二、先整理我们的前端页面,分为表单(提交主体)、图片提交弹窗(用于提交图片),为了好看,我先弄一个img跟input控件,img先定义一张默认图片,用来显示待会上传的图片,而input控件属性是隐藏的,用来存放待会返回的图片地址,用于上传用,代码如下:

    <form class="form-horizontal" method="post">
       <div class="control-group">
          <label class="control-label">头像</label>
          <div class="controls">
            <!--封面-->
              <img src="{{ asset('uploads/blog/av1.jpg') }}" alt="点击修改图片" id="blogImage"
                name="blogImage" class="img-thumbnail" data-toggle="modal" data-target=".bs- 
                example-modal-sm"  style="cursor:pointer; width:60px;height:60px">
            <!--封面-->
          </div>
            <!-- 封面地址 -->
               <input type="hidden" name="blogImageUrl" id="blogImageUrl"
                   value="uploads/blog/av1.jpg">
            <!-- 封面地址 -->
        </div>
        <div class="form-actions">
           <input type="button" value="提交" class="btn btn-success" onclick="insertBlog()">
        </div>
    </form>

           然后我们再定义我们的弹出窗口,代码如下:

    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"  style="width: 200px;" id="imageUpload">
       <div class="modal-dialog modal-sm" role="document">
         <div class="modal-content" style="text-align: center;height: 100px;padding-top: 
             50px;">
           <!-- 主内容 -->
               <div class="layui-upload">
                   <button type="button" class="layui-btn" id="test1">
                     上传图片
                   </button>
                   <input class="layui-upload-file" type="file" name="file">
               </div>
           <!-- 主内容 -->
         </div>
       </div>
    </div>

           接下来就是JS提交部分了,这部分是用layui介绍的方法以及自己的代码,思路是这样的,我们将图片上传到后台接口中,后台接口接收到图片保存起来,并返回图片地址,AJAX接收到返回结果,将返回的地址替换掉img中的默认图片,返回的图片地址放在隐藏的input控件中,同时关掉弹出窗,代码如下:

    <!--  处理上传头像 -->
    <script type="application/javascript">
       layui.use('upload', function () {
          var layer = layui.layer;
          var upload = layui.upload;
          var blogUpload = '{{ url('admin/blogUploadImg')}}';
          //执行实例
          var uploadInst = upload.render({
              elem: '#test1' //绑定元素
              , url: blogUpload //上传接口
              , done: function (res) {
              if (res.status == '1') {
                 document.getElementById("blogImage").src = res.msg["src"];  //重新设置博客封面地址
                 document.getElementById("blogImageUrl").value = res.msg["url"];  //赋值博客地址
                 $('#imageUpload').modal('hide');                            //隐藏模态框
                      return layer.msg('图片上传成功!');
                 } else if (res.status == '-1') {
                      return layer.msg(res.msg);
                 } else {
                      return layer.msg('图片上传失败');
                 }
               }
               , error: function () {
                  //请求异常回调
                  return layer.msg('图片上传失败');
               }
           });
       });
    </script>
    <!--  处理上传头像 -->

           三、接下来是我们的接口代码,负责接收图片并保存图片,返回图片地址,如下:

    public function blogUploadImg(Request $request)
    {
       $file = $request->file('file');//获取图片
       $allowed_extensions = ["png", "jpg", "gif"];
       //图片是否是正规图片
       if ($file->getClientOriginalExtension()&&!in_array
       ($file->getClientOriginalExtension(),$allowed_extensions)) {
        $data=BaseServiceAdmin::returnAjaxData
        ('-1', '只能上传 png | jpg | gif格式的图片');
        return $data;
       }
       if($request->hasFile('photo')) {
    
       }
       //保存图片
       $destinationPath = 'uploads/blog/';
       $extension = $file->getClientOriginalExtension();
       $fileName = md5(str_random(10) . time()) . '.' . $extension;
       $file->move($destinationPath, $fileName);
       //记录日志
       BaseServiceAdmin::logInfo('uploadsImg', '【接收到的图片】' . $file 
       . '【上传后的图片地址】' . asset($destinationPath . $fileName), 'uploadImg');
       //返回地址
       $data = BaseServiceAdmin::returnAjaxData
       ('1', asset($destinationPath . $fileName));
       return $data;
    }

           大家记得将我们这个方法的路由过滤掉,大家可以去看看之前关于CSRF验证的博客。   

           四、最后一步,就是提交表单,将此时提交图片获取到的地址保存到我们的数据库,这个代码就不贴出来了,大家根据自己的业务,自己弄,此时已经跟普通的提交字符串数据没什么区别了。

           以上就是利用layui图片上传插件实现的图片上传,这是最普通的做法,大家可以根据他们的API文档修改。本篇博客属于原创,如果引用请麻烦备注下原文链接,这也是对博主的一点尊重,谢谢。

           更多文章请关注微信公众号

     

    展开全文
  • Laravel-layui-admin 基于LaravelLayui构建的RBAC基础后台管理系统。 如果你想要vue版本的后台系统,移步 截图 要求 最低支持laravel5.8,支持6.0 安装 首先安装laravel,并确保您配置了正确的数据库连接。 ...
  • laravel使用layui 上传文件 支持pdf上传

    千次阅读 2019-12-13 14:14:26
    <div class="layui-form-mid layui-word-aux" id="img_file"> <img src="" onerror="this.style.display='none'" alt="..." width="70px" height="70px" class="layui-upload-img"> layer js部分: ...

    控制器:

    <?php
    
    namespace App\Http\Controllers\web;
    
    use App\Http\Controllers\Controller;
    use Illuminate\Http\Request;
    
    class   UploadsController extends Controller
    {
        /**
         * @param Request $request
         * @return false|string
         * 文件上传
         */
        public function UploadImg(Request $request)
        {
            $file = $request->file('file');//获取图片
            $allowed_extensions = ["png", "jpg", "gif","pdf"]; //多类型
            //图片是否是正规图片
            if ($file->getClientOriginalExtension()&&!in_array
                ($file->getClientOriginalExtension(),$allowed_extensions)) {
                $data=[
                    'status'=>-1,
                    'msg'=>'不支持此格式'
                ];
                return json_encode($data);
            }
            if($request->hasFile('photo')) {
    
            }
            //保存图片
            $path=date('Y/m/d/',time());
            $destinationPath ='uploads/blog/'.$path;
            is_dir($destinationPath) or mkdir($destinationPath,0777,true);
    
            $extension = $file->getClientOriginalExtension();
            $fileName = md5(str_random(10) . time()) . '.' . $extension;
            $file->move($destinationPath, $fileName);
            $data=[
                'status'=>1,
                'msg'=>$destinationPath.$fileName
            ];
            return json_encode($data);
        }
    }
    
    

    blade文件

    <form class="layui-form">
    				<div class="layui-form-item">
                        <label for="L_repass" class="layui-form-label">
                            导图
                        </label>
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test1">
                                上传图片
                            </button>
                            <input type="hidden" name="img_path" id="fileimg">
                        </div>
                        <div class="layui-form-mid layui-word-aux"  id="img_file">
                            <img src=""  onerror="this.style.display='none'" alt="..." width="70px" height="70px" class="layui-upload-img">
                        </div>
                    </div>
    </form>
    

    layer js部分:

    layui.use('upload', function () {
                var layer = layui.layer;
                var upload = layui.upload;
                var blogUpload = '{{ url('url')}}'; //上传图片的路径
                //执行实例
                var uploadInst = upload.render({
                    elem: '#test1' //绑定元素
                    , url: blogUpload //上传接口
                    ,accept: 'file'
                    ,exts: 'jpg|png|gif|bmp|jpeg|pdf|docx|doc'
                    ,data:{'_token':'{{csrf_token()}}'}
                    , done: function (res) {
                        if (res.status == '1') {
                            $('#img_file').show()
                            $('#img_file').find('img').attr('src',"{{env('URL').'/'}}"+res.msg)  //上传成功后预览图
                            $("#fileimg").val(res.msg)
                            return layer.msg('图片上传成功!');
                        } else if (res.status == '-1') {
                            return layer.msg(res.msg);
                        } else {
                            return layer.msg('图片上传失败');
                        }
                    }
                    , error: function () {
                        //请求异常回调
                        return layer.msg('图片上传失败');
                    }
                });
            });
    
    展开全文
  • laravel框架+layui做系统时,后台需要使用到富文本编辑器,首选当然简单的layui自带的layedit啦,不过上传图片时报错:“请求上传接口异常”,查看返回“419 unknown status”,很明显没有上传需要_token值,应该是...
  • 只需要get() 查询出来列表 使用 “巨人” 封装好的listConvert()方法就行了 省掉了百分之N的烧脑想法 再把处理的数据render 一下 一个清晰可见的图就出来了,这里 我做一个初稿,以后再来完善本篇文章
  • laravel-wjfcms是基于laravellayui开发的后台管理系统。 laravel-wjfcms有如下特点: ① 操作简单: laravel-wjfcms操作简单,只需几步安装就可以使用laravel最好的入门Demo: laravel是目前最流行PHP框架,它...
  • laravellayui 导出

    2019-06-18 15:46:29
    前端 : layui 后端 : laravel 需求 : 导出商品列表(6000多条数据),渠道列表(100条数据) 方法一 : 使用layui自带的table.exportFile(id, data, type)语法,在前端直接导出数据 过程 : 代码 : <script type="text/...
  • 基于laravel+layui开发完整cms后台,系统主要是志在更快的开发后台,减少代码冗余,所以本cms基本大部分通过js渲染html,php代码均为模块化写法,使用了模块化的开发模式 github地址:...
  • laravel+layui分页

    2020-04-07 16:11:57
    前端部分 <div class="layui-card-body"> <form class="layui-form"> <table class="layui-table" id="demo" lay-filter="test"> ...
  • Laravel+layui后台开发框架

    千次阅读 2020-09-02 15:16:21
    RXThinkCMF_LV5.8_PRO旗舰版 基于 Laravel5.8+Layui2.5.6 开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理、插件管理、钩子管理、数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多...
  • Laravel管理员后台权限管理系统 基于Laravel 5.5的初步...默认会生成一些假数据,方便调试首页使用Laravel的默认模板,登录后可通后admin目录登录后台或通后下图登录后台管理员邮箱: admin@admin.com密码: password
  • 第一步:views 加入添加图片的按钮以及显示图片的按钮 form部分 ...div class="layui-form-item layui-form-text"> <label class="layui-form-label">缩略图</label> <di...
  • div class="layui-input-block" style="float: left; position: relative;"> <label class="layui-form-label">订单搜索</label> <input style="width: auto;" type="text...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 507
精华内容 202
关键字:

laravel使用layui