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 = "";//小于20Mif (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));}}

功能到此结束!!!

列子截图:

参考:http://fly.layui.com/jie/19430/

给 layui upload 带每个文件的进度条, .net 后台代码相关推荐

  1. java ftp 上传文件 进度条_java FTP上传文件(进度条显示进度)

    java实现FTP上传有2种方式,一种是org.apache.commons.net.ftp.FTPClient这个jar包,一种是sun.net.ftp.FtpClient.不知道为什么,在使用前一 ...

  2. Layui页面元素之选项卡、进度条、面板、表格 、徽章、时间线、辅助元素

    Layui页面元素之选项卡.进度条.面板.表格 .徽章.时间线.辅助元素 效果 demo 选项卡.面板.时间线很重要 效果 demo <!DOCTYPE html> <html> ...

  3. 异步上传文件显示进度条

    异步上传文件显示进度条 原文地址:异步上传文件显示进度条 问题 我们在写网站时难免会遇到需要上传文件的场景,但当上传大文件时比如5个G的文件直接用表单直接提交文件会出现页面卡顿.未响应等影响用户体验的 ...

  4. html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画

    jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件.该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非 ...

  5. Visual C++利用互斥量同步线程实现文件读取进度条

    忘了原文的位置了. 一.前言 文件读取进度条的实现可以有很多种方法,常用的是在读取文件的过程中隔一定时间向对话框发送消息以控制进度条的位置,但是这种方法很难确定隔多少时问发送一个消息,因为文件的大小是 ...

  6. python下载文件加上日期_Python实现给下载文件显示进度条和下载时间代码

    本篇文章小编给大家分享一下Python实现给下载文件显示进度条和下载时间代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 该模块调用了三个库: 1. ...

  7. 进度条上的小圆点怎么做_Android自定义带圆点的半圆形进度条

    本文实例为大家分享了Android自定义带圆点的半圆形进度条,供大家参考,具体内容如下 仅限用于半圆形,如须要带圆点的圆形进度条,圆点会出现错位现象,此代码仅供,带圆点的圆形进度条有空研究一下!图片效 ...

  8. 前端js华为云obs上传下载文件与进度条的设置

    前端js华为云obs上传下载文件与进度条的设置 首先下载OBS BrowserJS SDK安装包 用git将代码拉到本地 git clone https://github.com/huaweiclou ...

  9. python进度条设计函数_Python进度条的制作代码实例

    这篇文章主要介绍了Python进度条的制作代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 import sys,time #导入模块 for ...

最新文章

  1. oracle导入索引b报错,impdp导入索引很慢
  2. 暑期集训1:C++STL 练习题D:HDU-1509
  3. 《HiWind企业快速开发框架实战》(0)目录及框架简介
  4. sqlserver存储过程sp_send_dbmail邮件(html)实际应用
  5. Oracle高级查询之OVER (PARTITION BY ..)
  6. 小米air耳机重新配对_小米发布 399 元真无线蓝牙耳机,除了小爱同学还支持其他手机语音助手...
  7. 感知重塑与忠诚建立:车企营销的两大新机遇
  8. rem + vw 布局
  9. 【转】谈一谈PHP字串清除空格函数不安全
  10. java翻译_java实现英文翻译程序
  11. php zip扩展文件,php使用ZipArchive扩展实现文件的zip压缩与zip解压
  12. MySQL: 为什么使用 innobackupex 备份恢复搭建主从时,必须人为设置 gtid_purged 变量
  13. Minimax AI 算法在井字游戏(或 Noughts and Crosses)游戏中的实现
  14. 华为又要给员工分红了!预计每股 1.61 元,网友:点赞任正非
  15. java怎么实现手机投影,在Java中投射对象
  16. 创建手工凭证实现分录中原币=0本位币<>0的效果-FBB1
  17. 制作坦克大战,坦克移动代码
  18. 超级账本Fabric学习(二)Fabric1.0.0网络搭建(中)无业务逻辑处理的Fabric网络
  19. python自动刷手机视频_万能自动刷视频
  20. 计算机屏幕显示故障,led显示屏的十大常见故障及其解决方法

热门文章

  1. 介绍for-of循环
  2. 同济保研计算机,同济大学保研率28%,保研高校前四:复旦、北大、交大、清华...
  3. 硬盘测试软件di,磁盘检测(Folder Size Professional)
  4. html 自定义标签 seo,wordpress深层seo优化:自定义栏目和tag标签页面title标题
  5. 的标题形状工具在哪里_一分钟教你做一款让人眼前一亮的标题!你想学吗?「Word技巧」...
  6. android meminfo,Android中dumpsys meminfo与/proc/meminfo获取空闲内存不一致的问题
  7. 计算机网络的功能分布计算,网络中心的分布计算(转帖)
  8. VB实现指示窗口中拖动方框的程序
  9. 20个技巧让你玩转Windows 7
  10. 李彦宏谈无人车:高速上吃着火锅唱着歌,再有三五年能代替司机