laravel上传文件，怎么可以显示上传进度？

laravel上传文件，显示上传进度怎么做，要用额外的什么composer么？

9年前

正好最近有做这个，显示进度是客户端的操作。我并没有使用上传的插件。首先在head标签里面加上

    <meta name="_token" content="{ csrf_token() }">

然后是js代码：

    $("#upload_file").on('change',function(){
        if(!this.files.length) return false;
        var formData=new FormData();
        var file=this.files[0];
        formData.append('upfile',file,file.name);
        var xhr = new XMLHttpRequest();
        xhr.open('post','{ action('FileController@upload') }?dir={ $currentDir }',true);
        xhr.setRequestHeader('X-CSRF-TOKEN',$("meta[name=_token]").attr('content'));
        xhr.onload = function() {
            if (xhr.status === 200) {
                layer.alert("上传完成!",{},function(){
                    location.reload(true);
                });
            } else {
                alert('An error occurred!');
            }
        };
        /*主要是这里*/
        xhr.upload.onprogress=function(evt){
            $("#info").html('正在上传...'+Math.floor(100*evt.loaded/evt.total)+"%");
        }
        xhr.send(formData);
    });

upload_file是上传按钮的id。info是显示进度的div的id。里面还有用到layer.alert，你可以认为就是alert。当然最重要的一点是低版本的浏览器并不支持。。

0 分享

perfectboook

9年前

我发的markdown代码坏掉了~ @JellyBool

0 分享

sswowo

9年前

我记得如果服务端不装别的组件配合的话是没有办法获得上传进度的吧
这里是不是只是做一个假的进度条? @perfectboook
比如上传客户端用flash 实现就可以知道发送了多少字节
或者服务端提供一个接口可以通过定义一个唯一id 实时查询上传进度然后在客户端渲染
比如 nginx upload progress module

0 分享