正文 

当前位置： 首页 > java > java教程

layui魔改：上传时的真实进度条(代码片段)

foxcharon foxcharon     2022-12-24     759

关键词：

这个问题本身不复杂，难点在于需要改 layui 的源码。

HTML略。

网页的JS域：

layui.use([‘upload‘,‘element‘,‘layer‘], function()
    var upload = layui.upload,element = layui.element,layer = layui.layer;
    upload.render(
    elem: ‘#test8‘
    ,url: ‘upload‘
    ,async: false
    ,method: ‘post‘
    ,data: 
        upgradeType: function()
        return $("input[name=‘upgradeType‘]:checked").val();
        
    
    ,auto: false
    ,xhr:xhrOnProgress
    ,progress:function(value)//上传进度回调 value进度值
        element.progress(‘demo‘, value+‘%‘)//设置页面进度条
    
    ,accept: ‘file‘ //普通文件
    ,exts: ‘zip‘ //只允许上传压缩文件
    ,field:‘uploadFile‘
    ,bindAction: ‘#test9‘
    ,choose: function(obj)
        var uploadFileInput=$(".layui-upload-file").val();
        var uploadFileName=uploadFileInput.split("\");
        $("#uploadName").text(uploadFileName[uploadFileName.length-1]);
    
    ,before: function(obj)
        layer.load(); //上传loading
    
    ,done: function(res)
        layer.msg("上传成功");
    
    ,error: function(index, upload)
        element.progress(‘demo‘, ‘0%‘);
        layer.msg(‘上传失败‘);
    
    );
);

//创建监听函数
     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;

可以考虑把 xhrOnProgress 放在一个库里面，但不知道能不能直接放到Layui的源码里面。

然后就是重点了：改 layui 源码。

upload.js : 

...
//默认配置
  Class.prototype.config = 
    accept: ‘images‘ //允许上传的文件类型：images/file/video/audio
    ,exts: ‘‘ //允许上传的文件后缀名
    ,auto: true //是否选完文件后自动上传
    ,bindAction: ‘‘ //手动上传触发的元素
    ,url: ‘‘ //上传地址
    ,field: ‘file‘ //文件字段名
    ,method: ‘post‘ //请求上传的http类型
    ,data:  //请求上传的额外参数
    ,drag: true //是否允许拖拽上传
    ,size: 0 //文件限制大小，默认不限制
    ,number: 0 //允许同时上传的文件数，默认不限制
    ,multiple: false //是否允许多文件上传，不支持ie8-9
    ,xhr:function()
  ;
...
$.ajax(
    url: l.url
    ,type: l.method
    ,data: formData
    ,contentType: false 
    ,processData: false
    ,dataType: ‘json‘
    ,xhr:l.xhr(function(e)//此处为新添加功能
         var percent=Math.floor((e.loaded / e.total)*100);//计算百分比
         l.progress(percent);//回调将数值返回
     )
     ,success: function(res)
         successful++;
         done(index, res);
         allDone();
     
     ,error: function(e)
         console.log(e)
         aborted++;
         that.msg(‘请求上传接口出现异常‘);
         error(index);
         allDone();
     
);
...

需要修改的地方标红了。

这样就完成了，写上传业务的时候不管有没有写xhr参数都可以正常提交。

参考：https://blog.csdn.net/lin452473623/article/details/80785180

[layui]上传文件带进度条+表单提交功能优化(代码片段)

上传文件带进度条+表单提交功能优化前期做了一个简视频提交；每次只提交一个需要重新上传。视频文件较大时候没有进度提示，用户体验并不好，今天做一个简单的优化！如果监听提交表单时候，回调路径可能还未完成。提... 查看详情

layui上传图片(代码片段)

...好用的。对一些不复杂的功能来说还算是方便。记录一下上传图片方式，layui集成了图片上传及预览的方式。看看效果图 前端HTML代码，用于展示上传图片按钮及预览的位置； 还带进度条哦...<divclass="layui-uplo... 查看详情

使用 XMLHttpRequest 上传大文件时的进度条

】使用XMLHttpRequest上传大文件时的进度条【英文标题】：ProgressbarwhileuploadinglargefileswithXMLHttpRequest【发布时间】：2013-04-0415:27:08【问题描述】：我正在尝试使用XMLHttpRequest和file.slice将一些大文件上传到服务器。我已经在文档和其... 查看详情

htmljs通过进度条上传文件(代码片段)

查看详情

php使用进度条上传文件(代码片段)

查看详情

layui上传图片(代码片段)

...好用的。对一些不复杂的功能来说还算是方便。记录一下上传图片方式，layui集成了图片上传及预览的方式。看看效果图 前端HTML代码，用于展示上传图片按钮及预览的位置； 还带进度条哦...<divclass="layui-uplo... 查看详情

jquery上传文件显示进度条(代码片段)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="../js/jquery.js"></script></head><body><h2>HTML5异步上传文件，带进度条(jQuery)</h2><formm 查看详情

php使用进度条上传文件-php和jquery(代码片段)

查看详情

[c#]多线程总结(结合进度条)(代码片段)

...周期未启动状态：当线程实例被创建但Start方法未被调用时的状况。就绪状态：当线程准备好运行并等待CPU周期时的状况。不可运行状态：已经调用Sleep方法已经调用Wait方法通过I/O操作阻塞死亡状态：当线程已完成执行或已中止... 查看详情

unity简单的进度条实现(代码片段)

...Text文本需要载入的场景（这里使用的是自带场景）载入时的场景布局：要将Load的ImageType修改为Filled，FillMethod修改为Horizontal具体代码如下：1usingSystem.Collections;2usingUnityEngine;3usingUnityEngin 查看详情

我需要知道已经上传了多少字节来更新进度条android(代码片段)

我正在开发一个用于上传视频到Apache/PHP服务器的应用程序。在这一刻，我已经可以上传视频了。我需要在上传文件时显示进度条。我有下一个代码使用AsyncTask和HTTP4.1.1库来模拟FORM。classuploadVideoextendsAsyncTask<Void,Void,String>@Over... 查看详情

异步上传文件（jquery.form）+进度条+上传到ftp服务器(代码片段)

最近写了一个小项目需要上传文件显示进度条到ftp，总结一下分享我用的是jQuery.form.js上传ftp服务器，自己百度去搭建很简单的Talkischeap.Showmeyourcode.    GitHub上面的源码：https://github.com/Vinkong/learngitaspx页面<%@PageLan... 查看详情

利用formdata对象+xhr新特性实现文件上传——带进度条(代码片段)

小编今天又get到一个新技能，就是上传图片并显示进度条，话不多说，直接进入正题！冲冲冲！！💪实现效果：当点击上传文件按钮后，如果未选择文件，会跳出请选择要上传的文件提示框... 查看详情

如何实现一个进度条，显示我用xhr函数上传％(代码片段)

letformData2=newFormData();formData2.append('_token',vm.response._token);formData2.append('file',vm.response.content[i].path);formData2.append('type',vm.response.content[i].type);$.ajax(async:false,u 查看详情

记录小文件上传的几个例子（含进度条效果，附源码下载）(代码片段)

1、简单原生上传无javascript脚本、无进度条；借助iframe实现post提交后的无刷新效果；jquery插件ajaxFileUpload.js的实现原型。Html代码<formenctype="multipart/form-data"action="UploadFile_1"method="post"target="frameResult"><divclass="ite 查看详情

elementel-upload自定义上传显示进度条，多文件上传进度(代码片段)

...rl:‘http://192.168.1.5:8889/upload‘,method:‘post‘,data:FormDatas,//上传 查看详情

使用jquery.form.js实现文件上传及进度条前端代码

...x的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。需要解释下我的结构，#upload-input-file的input标签是真实的文件上传... 查看详情

字符串操作以及打印——实现上传下载的进度条功能(代码片段)

importsysdefprocessBar(num,total):rate=num/totalrate_num=int(rate*100)ifrate_num==100:r=‘%s>%d%%‘%(‘=‘*rate_num,rate_num,)else:r=‘%s>%d%%‘%(‘=‘*rate_num,rate_num,)sys.stdout.write(r)sys.st 查看详情