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

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

                选择多文件
                

                    

                        

                         
文件名
                            
大小
                            
状态
                            
操作
                        
                        

                    
                
                开始上传
            

注意要更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 = $([''
                        ,''+ file.name +''
                        ,''+(file.size/1014).toFixed(1) +'kb'
                        ,'   
\n' +
                        '        
\n' +
                        '    
' +
                        '' +
                        ''
                        ,''
                        ,'重传'
                        ,'删除'
                        ,''
                        ,''].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('上传成功');
                    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('上传失败');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
      });
    });

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

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