Laravel 5.2 + layui实现视频上传(+ 进度条)原创

本唐夫人（怕不是个傻子） 因为这个功能烧了好多脑细胞，话不多，上代码！
HTML:

<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 site-demo-active"  data-type="loading" id="testListAction">开始上传</button>
            </div>

注意要更layui的upload.js
这个是我的文件目录，可以参考！

1.在dataType:“json” 后面添加

 ,xhr:l.xhr(function(e){//此处为新添加功能
        var percent=Math.floor((e.loaded / e.total)*100);//计算百分比
        l.progress(percent);//回调将数值返回
    })

注意前面的,一点要注意，不然会报错的！
2.搜索 p.prototype.config 在{内添加 ,xhr:function(){} 不要忘记 , 在最后添加。}
更改了，layui的源代码后，就没有什么技术难题了，
js代码：

 layui.use(['form', 'layedit', 'laydate','element', 'upload','table'], function(){
        var $ = layui.jquery
            
            ,element = layui.element;
        var xhrOnProgress=function(fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
            //使用闭包实现监听绑
            return function() {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        }
 var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,url: '{{url('vadd')}}'
            ,accept: 'file'
            ,multiple: true
            ,auto: false
            ,bindAction: '#testListAction'
            ,xhr:xhrOnProgress
            ,progress:function(value){//上传进度回调 value进度值
                element.progress('demo', value+'%');//设置页面进度条
            }
            ,choose: function(obj){
                _files=[];
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    var fileseli = ((file.size/1014).toFixed(1));
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                        ,'<td>'+(file.size/1014).toFixed(1) +'kb</td>'
                        ,'<td>   <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">\n' +
                        '        <div class="layui-progress-bar layui-bg-red" lay-percent="(file.size/1014).toFixed(1)%"></div>\n' +
                        '    </div>' +
                        '' +
                        '</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.code == 0){ //上传成功
                    console.log(res);
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();

                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    _files.push(res.file);
                    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'); //显示重传
            }
        });
      });
    });

好了，就这么多！
效果看图；
1.

2.3.
好了，上传成功了，有什么问题，请留言！