js获取文件上传进度：

<input name="file" id="FileUpload" type="file" />

<input type="button" onclick="Submit()" value="提交" />

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;

	  }

}

　ajax文件上传函数：

function Submit(){

		 var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象

		 var formFile = new FormData();

         formFile.append("file", fileObj); //加入文件对象

          var data = formFile;

          $.ajax({

                   url: url,

                   data: data,

                   type: "Post",

                   dataType: "json",

                   cache: false,//上传文件无需缓存

                   processData: false,//用于对data参数进行序列化处理 这里必须false

                   contentType: false, //必须

                   xhr:xhrOnProgress(function(e){

		   			  var percent=e.loaded/e.total;//文件上传百分比

		   			  console.log(percent);

		   		   }),

                   success: function (result) {

                       console.log(result);

                   },

               })

	}

　　

完整代码:

<!DOCTYPE html>

<html lang="zh">

<head>

	<meta charset="UTF-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<meta http-equiv="X-UA-Compatible" content="ie=edge" />

	<title>Document</title>

</head>

<body>

	  <input name="file" id="FileUpload" type="file" />

	  <input type="button" onclick="Submit()" value="提交" />

</body>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

	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;

	  }

    }

	function Submit(){

		 var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象

		 var formFile = new FormData();

         formFile.append("file", fileObj); //加入文件对象

          var data = formFile;

          $.ajax({

                   url: "http://up.qiniu.com/",

                   data: data,

                   type: "Post",

                   dataType: "json",

                   cache: false,//上传文件无需缓存

                   processData: false,//用于对data参数进行序列化处理 这里必须false

                   contentType: false, //必须

                   xhr:xhrOnProgress(function(e){

		   			  var percent=e.loaded/e.total;

		   			  console.log(percent);

		   		   }),

                   success: function (result) {

                       console.log(result);

                   },

               })

	}

</script>

</html>

　　

js获取文件上传进度的更多相关文章

  1. Node.js——获取文件上传进度

    https://juejin.im/post/5a77a46cf265da4e78327552?utm_medium=fe&utm_source=weixinqun

  2. Node.js：上传文件，服务端如何获取文件上传进度

    内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件 ...

  3. Java使用comms-net jar包完成ftp文件上传进度的检测功能

    本文章只讲述大致的思路与本次功能对应的一些开发环境,具体实现请结合自己的开发情况,仅供参考,如果有不对的地方,欢迎大家指出! 准备环境:JDK1.7 OR 1.8.eclipse.ftp服务器(可自行 ...

  4. 利用Bootstrap简单实现一个文件上传进度条

    © 版权声明:本文为博主原创文章,转载请注明出处 说明: 1. 使用commons-fileupload.jar实现文件上传及进度监听 2. 使用bootstrap的进度条进行页面显示 3. 因为进度 ...

  5. spring定时任务-文件上传进度条

    spring定时任务 导依赖 <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz --> <dep ...

  6. HTML5矢量实现文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  7. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  8. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  9. Web---文件上传-用apache的工具处理、打散目录、简单文件上传进度

    我们需要先准备好2个apache的类: 上一个博客文章只讲了最简单的入门,现在来开始慢慢加深. 先过渡一下:只上传一个file项 index.jsp: <h2>用apache的工具处理文件 ...

随机推荐

  1. 用Decorator控制Koa路由

    在Spring中Controller长这样 @Controller public class HelloController{ @RequestMapping("/hello") ...

  2. web flash推流录制测试研究

    用flash as3写了一段推流测试demo,参考srs_publisher和simplest_as3_rtmp_streamer.推流到srs2服务器,录制为flv文件.测试一轮结果如下: Web ...

  3. 使用gifplayer操作gif的方法

    使用的工具--gifplayer 基本用法: 1.安装 git clone https://github.com/rubentd/gifplayer.git 2.添加一张gif预览的图片 <im ...

  4. Canvas 与 Image 相互转换

    转换 Image为 Canvas 要把图片转换为Canvas(画板,画布),可以使用canvas元素 context 的drawImage方法: 代码如下: // 把image 转换为 canvas对 ...

  5. 利用Android studio开发Java工程

    1. 新建项目 新建项目肯定是去new,但到底是new project还是new module是一个问题.在这解释一下,如果new project的话是新建一个工程,相当于新建一个工作区,工程中可以有 ...

  6. Web项目HttpContext.Current 为空

    项目中,用到了WCF Service服务,用的是Windows身份验证,正常登陆后 HttpContext.Current=null 解决方法—— 1.在Web.config文件中添加配置项 < ...

  7. hdu6223 Infinite Fraction Path 2017沈阳区域赛G题 bfs加剪枝（好题）

    题目传送门 题目大意:给出n座城市,每个城市都有一个0到9的val,城市的编号是从0到n-1,从i位置出发,只能走到(i*i+1)%n这个位置,从任意起点开始,每走一步都会得到一个数字,走n-1步,会 ...

  8. HDU 4507 求指定范围内与7不沾边的所有数的平方和 （数位DP）

    题意:求区间[l,r]内所有与7无关的数的平方和(取模)定义与7无关的数:                                      1.数字的数位上不能有7              ...

  9. django组件之中间件

    中间件的概念 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影响到 ...

  10. linux 学习2 (基于ubuntu)

    一.远程管理命令 关机/重启 shutdown   reboot(重启)   halt(直接关机) 查看或配置网卡信息 ifconfig ping 远程登录和复制文件 ssh ping 1. 关机/重 ...