关键词：
1.修改上传组件js(没测)
https://blog.csdn.net/weixin_42457316/article/details/81017471
https://www.cnblogs.com/youmingkuang/p/9183528.html
https://fly.layui.com/jie/19430/
1、upload.js 扩展
功能利用ajax的xhr属性实现
该功能修改过modules中的upload.js文件
功能具体实现：
在js文件中添加监听函数
//创建监听函数
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;
初始化上传
//初始化上传
upload.render(
elem: ‘上传地址‘
,url: path+‘/upload/uploadVideo.do‘
,accept: ‘video‘
,size: 512000
,auto:false
,xhr:xhrOnProgress
,progress:function(value)//上传进度回调 value进度值
element.progress(‘demo‘, value+‘%‘)//设置页面进度条
,bindAction:‘#uploadvideo‘
,before: function(input)
//返回的参数item，即为当前的input DOM对象
console.log(‘文件上传中‘);
,done: function(res)
//上传成功
console.log(res)
);
修改modules中upload.js文件的ajax方法
//提交文件
$.ajax(
url: options.url
,type: options.method
,data: formData
,contentType: false
,processData: false
,dataType: ‘json‘
,xhr:options.xhr(function(e)//此处为新添加功能
var percent=Math.floor((e.loaded / e.total)*100);//计算百分比
options.progress(percent);//回调将数值返回
)
,success: function(res)
successful++;
done(index, res);
allDone();
,error: function(e)
console.log(e)
aborted++;
that.msg(‘请求上传接口出现异常‘);
error(index);
allDone();
);
后台代码：
public ActionResult UploadFiles(HttpPostedFileBase fileNames)
string path = "";
//小于20M
if (fileNames.ContentLength > 0 && fileNames.ContentLength <= 120971520)
var fileName = Path.GetFileName(fileNames.FileName);
string q_FN = fileName.Substring(0, fileName.LastIndexOf("."));
string h_FN = fileName.Substring(fileName.LastIndexOf("."));
string NewFileName = q_FN + DateTime.Now.ToString("yyyyMMddHHmmss") + h_FN;
path = Path.Combine(Server.MapPath("/Uploadfile/"), NewFileName);
fileNames.SaveAs(path);
path = "/Uploadfile/" + NewFileName;
var relt = new tc = path ;
return Content(JsonConvert.SerializeObject(relt));
else
var relt = new tc = "上传文件要小于20M" ;
return Content(JsonConvert.SerializeObject(relt));
功能到此结束！！！
列子截图：
2.模拟一个假的进度条
https://blog.csdn.net/lin452473623/article/details/80784717
layui.use([‘upload‘,‘element‘,‘layer‘], function()
var upload = layui.upload,element = layui.element,layer = layui.layer;
var timer;//定义一个计时器
//选完文件后不自动上传
upload.render(
elem: ‘#test8‘
,url: ‘upload‘
,async: false
,method: ‘post‘
,data:
upgradeType: function()
return $("input[name=‘upgradeType‘]:checked").val();//额外传递的参数
,auto: false
,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) //obj参数包含的信息，跟choose回调完全一致
layer.load(); //上传loading
var n = 0;
timer = setInterval(function()//按照时间随机生成一个小于95的进度，具体数值可以自己调整
n = n + Math.random()*10|0;
if(n>95)
n = 95;
clearInterval(timer);
element.progress(‘demo‘, n+‘%‘);
, 50+Math.random()*100);
,done: function(res)
clearInterval(timer);
element.progress(‘demo‘, ‘100%‘);//一成功就把进度条置为100%
layer.closeAll(); layer.msg(‘上传成功‘); ,error: function(index, upload)element.progress(‘demo‘, ‘0%‘);layer.closeAll(); //关闭所有层layer.msg(‘上传更新包失败‘); ););
参考：https://www.layui.com/doc/modules/upload.html
layui魔改：上传时的真实进度条(代码片段)
这个问题本身不复杂，难点在于需要改layui的源码。HTML略。网页的JS域：layui.use([‘upload‘,‘element‘,‘layer‘],function()varupload=layui.upload,element=layui.element,layer=layui.layer;upload.render(elem:‘#test8‘,url:‘upload‘,async: 查看详情
htmljs通过进度条上传文件(代码片段)
php使用进度条上传文件(代码片段)
我需要知道已经上传了多少字节来更新进度条android(代码片段)
...程序。在这一刻，我已经可以上传视频了。我需要在上传文件时显示进度条。我有下一个代码使用AsyncTask和HTTP4.1.1库来模拟FORM。classuploadVideoextendsAsyncTask<Void,Void,String>@OverrideprotectedStringdoInBackground(Voi 查看详情
jquery上传文件显示进度条(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="../js/jquery.js"></script></head><body><h2>HTML5异步上传文件，带进度条(jQuery)</h2><formm 查看详情
php使用进度条上传文件-php和jquery(代码片段)
layui上传图片(代码片段)
...好用的。对一些不复杂的功能来说还算是方便。记录一下上传图片方式，layui集成了图片上传及预览的方式。看看效果图 前端HTML代码，用于展示上传图片按钮及预览的位置； 还带进度条哦...<divclass="layui-uplo... 查看详情
异步上传文件（jquery.form）+进度条+上传到ftp服务器(代码片段)
最近写了一个小项目需要上传文件显示进度条到ftp，总结一下分享我用的是jQuery.form.js上传ftp服务器，自己百度去搭建很简单的Talkischeap.Showmeyourcode. GitHub上面的源码：https://github.com/Vinkong/learngitaspx页面<%@PageLan... 查看详情
利用formdata对象+xhr新特性实现文件上传——带进度条(代码片段)
...xff01;冲冲冲！！💪实现效果：当点击上传文件按钮后，如果未选择文件，会跳出请选择要上传的文件提示框，反之，会有一个上传图片的进度条显示，当上传完 查看详情
记录小文件上传的几个例子（含进度条效果，附源码下载）(代码片段)
1、简单原生上传无javascript脚本、无进度条；借助iframe实现post提交后的无刷新效果；jquery插件ajaxFileUpload.js的实现原型。Html代码<formenctype="multipart/form-data"action="UploadFile_1"method="post"target="frameResult"><divclass="ite 查看详情
模拟进度条(代码片段)
1#模拟进度条2importtime3scale=504t=time.perf_counter()5print("执行开始".center(scale//2,"-"))6foriinrange(1,scale+1):7a,b="*"*i,""*(scale-i)8c=(i/scale)*1009t=time.perf_counter()10print("\r:^6.2f%[]耗时：: 查看详情
elementel-upload自定义上传显示进度条，多文件上传进度(代码片段)
...d="true"><el-buttonslot="trigger"size="small"type="primary">选取文件</el-button></el-upload></div></template><script>exportdefaultdata()returnfileList:[],,components:,mounted(),methods:customUpload(file)letFormDatas=newFormData();FormDatas.append(‘file‘... 查看详情
jqueryajax实现上传文件代码，带进度条
原文：jqueryajax实现上传文件代码，带进度条 源代码下载地址：http://www.zuidaima.com/share/1550463291116544.htmajax上传文件代码，带进度条的。首页http://localhost:端口/项目名/common/test.htm上传中标签： jquery ajax 上传 ... 查看详情
jqueryajax实现上传文件代码，带进度条
原文：jqueryajax实现上传文件代码，带进度条 源代码下载地址：http://www.zuidaima.com/share/1550463291116544.htmajax上传文件代码，带进度条的。首页http://localhost:端口/项目名/common/test.htm上传中标签： jquery ajax 上传 查看详情
模拟动态进度条(代码片段)
<styletype="text/css">.processwidth:10px;height:18px;background-color:#5bc0de;background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15)25%,transparent25%,transparent50%,rgba(255,255 查看详情
layui上传图片(代码片段)
...好用的。对一些不复杂的功能来说还算是方便。记录一下上传图片方式，layui集成了图片上传及预览的方式。看看效果图 前端HTML代码，用于展示上传图片按钮及预览的位置； 还带进度条哦...<divclass="layui-uplo... 查看详情
文件上传和进度条
】文件上传和进度条【英文标题】：Fileuploadandprogessbar【发布时间】：2013-01-2114:01:05【问题描述】：我想在上传文件时根据读取的文件数量显示进度条。我们如何使用JS和Servlet来实现这一点我知道上传我可以使用apachecommonslib，但... 查看详情
如何在ajax文件上传中显示进度条
】如何在ajax文件上传中显示进度条【英文标题】：Howtoshowprogressbarinajaxfileupload【发布时间】：2013-01-2605:22:52【问题描述】：我的代码发布了ajax请求，但没有显示进度条。请帮助更正代码以显示工作进度条。$(document).ready(function()... 查看详情