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

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));
            }
        }

功能到此结束!!!

列子截图:

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

原文地址:https://www.cnblogs.com/youmingkuang/p/9183528.html

时间: 2024-10-07 06:48:18

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

jQuery文件上传插件jQuery Upload File 有上传进度条

jQuery文件上传插件jQuery Upload File 有上传进度条 2015年05月15日 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度条显示.标准HTML form文件上传,也就是说,只要服务端支持接收multipart/form-data格式数据就能使用此上传插件. 本站web端文件文件提交即使用此插件,效果如下: 浏览器支持 浏览器支持:IE 8.0,IE 9.0,IE 10.0,Firefox,Saf

VC下载文件显示进度条

VC下载文件显示进度条 逗比汪星人2009-09-18上传 by Koma http://blog.csd.net/wangningyu http://download.csdn.net/detail/wangningyu/1674247

Windows Phone 带文本信息的进度条

2. [图片Windows Phone 带文本信息的进度条 详细说明:http://wp.662p.com/thread-7980-1-1.html

HTML5 canvas带渐变色的圆形进度条动画

query-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件.该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非常的酷. 效果演示:http://www.htmleaf.com/Demo/201505271919.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201505271918.html

jQuery上传文件显示进度条

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../js/jquery.js"></script> </head> <body> <h2>HTML5异步上传文件,带进度条(jQuery)</h2> <form method="post"

原生js上传文件 显示进度条

最近在做文件上传的功能,因为界面设计比较简单,就没有引用jq,但是网上大部分的上传插件都需要jq的支持.为了一个上传功能引用90多k的jq文件有点太小题大做了,所以就自己动手写了一个原生js上传的demo.下面是代码: HTML代码 <html> <head> <title></title> </head> <body> <input type="file" id="f" /> &l

ajaxSubmit() 上传文件和进度条显示

1.  首先引用js文件 <script type="text/javascript" src="/js/jquery/jquery.form.js"></script> //ajaxForm 依赖脚本 <script type="text/javascript" src="/js/jquery/jquery-1.8.0.min.js"></script> 2.  form 表单

vue项目上传文件以及进度条

最近做项目的时候,需要上传自定义镜像.并且附带进度条,上网查询一下资料,经过一番折磨,也总算做出来了,把自己写项目的内容给大家分享一下. 先直接贴代码吧 1.首先声明一个formData对象. 2.把需要上传的参数利用append追加进去. append('参数名','值') 第一个this.$refs.upload.files[0],其实就是input标签加上ref唯一关键字就是upload. var fd = new FormData(); fd.append('image', that.$

Layui upload多图片上传, 传参后台接受不到

Layui upload动态传参,后台接收不到,解决方法 这里参数动态($(#).val())拿去不到,除非写死,必须要用before从新赋值 layui.config({ base: '/Assets/layui/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use(['index', 'upload'], function () { var $ = layui.jquery , upload = layui.upload; va