layui文件上传进度条(模拟)
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多文件上传进度条
Layui原生upload模块不支持文件上传进度条显示,百度,谷歌找了一下不太适用.后面找到一个别人修改好的JS,替换上去,修改一下页面显示即可使用,一下是部分代码 HTML: <div cla ...
- HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- 基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
- iOS_文件上传进度条的实现思路-AFNettworking
iOS_文件上传进度条的实现思路-AFNettworking //要上传的文件名,在这里我使用当前日期做为文件的名称 NSString * fileName =[NSString stringWith ...
- asp.net文件上传进度条研究
文章:asp.net 文件上传进度条实现代码
- spring定时任务-文件上传进度条
spring定时任务 导依赖 <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz --> <dep ...
- vue多文件上传进度条 进度不更新问题
转自 hhttp://www.cnblogs.com/muge10/p/6767493.html 感谢这位兄弟的文章,之前因为这个问题 ,我连续在sgmentflow上提问过多次,完全没人能回答.谢谢 ...
- 利用Bootstrap简单实现一个文件上传进度条
© 版权声明:本文为博主原创文章,转载请注明出处 说明: 1. 使用commons-fileupload.jar实现文件上传及进度监听 2. 使用bootstrap的进度条进行页面显示 3. 因为进度 ...
随机推荐
- JTree常用方法
private JTree jtNetDevice;//数组件申明private JScrollPane jspTree;//滚动面板申明 1.初始化 DefaultMutableTreeNo ...
- PCL中点云数据格式之间的转化
(1) 关于pcl::PCLPointCloud2::Ptr和pcl::PointCloud<pcl::PointXYZ>两中数据结构的区别 pcl::PointXYZ::PointXYZ ...
- java 、HashMap 和单例
前段时间在项目中遇到一个问题.当多个系统同时运行时,大部分系统能够良好运转,部分却卡死在了启动界面.以下是我解决该问题的步骤和总结: 1.复现问题.重新走了一遍出问题的过程,发现问题的确存在.说明 ...
- 解决java.lang.IllegalStateException: The application’s PagerAdapter changed the adapter’s content
A界面中有viewpager的动态加载,从界面A跳到界面B,再finish掉B返回A时报出此异常. java.lang.IllegalStateException: The application's ...
- 关于Unity中Vector2和Vector3的使用
Vector2是用来定义和描述2D游戏内部的一些参数,像刚体的速度等等 Vector3是 1.鼠标点击屏幕后要转化为3D坐标的时候用到的定义和描述 2.两个物体之间的相对距离,或者说偏移量的变量类型
- android Toast大全(五种情形)建立属于你自己的Toast
Toast用于向用户显示一些帮助/提示.下面我做了5中效果,来说明Toast的强大,定义一个属于你自己的Toast. 1.默认效果 代码 Toast.makeText(getApplicationCo ...
- linux下压缩与打包工具——gzip, bzip2 和 tar;
以下内容来自:阿铭http://www.apelearn.com/study_v2/chapter11.html, 把常用的写出来了:感觉可以了: 只管压缩与解压缩的工具: gzip 工具: 用的时候 ...
- 第三百四十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—爬虫和反爬的对抗过程以及策略—scrapy架构源码分析图
第三百四十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—爬虫和反爬的对抗过程以及策略—scrapy架构源码分析图 1.基本概念 2.反爬虫的目的 3.爬虫和反爬的对抗过程以及策略 scra ...
- 嵌入式驱动开发只设备数---dts
http://blog.sina.com.cn/s/blog_ad64b8200101e7q0.html
- ELK filter过滤器来收集Nginx日志
前面已经有ELK-Redis的安装,此处只讲在不改变日志格式的情况下收集Nginx日志. 1.Nginx端的日志格式设置如下: log_format access '$remote_addr - $r ...