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. C语言数据结构-队列的实现-初始化、销毁、清空、长度、队列头元素、插入、删除、显示操作

    1.数据结构-队列的实现-C语言 //队列的存储结构 #define MAXSIZE 100 typedef struct { int* base; //基地址 int _front; //头指针 i ...

  2. luogu1999 高维正方体

    神仙题 分析法是个好方法 反正xjb分析就分析出来了 首先,i维立方体的点数(0维元素数)为\(2^i\) 首先0维肯定是1(不就是一个点吗) 你想想你是怎么用点拼成线段的 你把两个点往地上一扔 然后 ...

  3. linux curl命令:curl: (7) couldn't connect to host ？

    linux curl命令:curl: (7) couldn't connect to host ? 使用linux命令 curl http://www.test.com 出现如下错误:curl: (7 ...

  4. P3796 【模板】AC自动机

    传送门 AC自动机的模板 简单的理解就是字典树上的KMP 注意数组不要开太大 不然每次memset耗时太多 有一个小优化 每次走 fail 边找匹配时只有一些会更新答案 那么就可以把没用的fail边压 ...

  5. poj1860 兑换货币（bellman ford判断正环）

    传送门:点击打开链接 题目大意:一个城市有n种货币,m个货币交换点,你有v的钱,每个交换点只能交换两种货币,(A换B或者B换A),每一次交换都有独特的汇率和手续费,问你存不存在一种换法使原来的钱更多. ...

  6. RequestContextHolder与RequestContextUtils

    org.springframework.web.servlet.support.RequestContextUtils 在spring-webmvc中, 主要用来获取WebApplicationCon ...

  7. windows远程xshell文件上传下载：

    安装:yum install -y lrzsz 上传:rz下载:sz 文件名

  8. java——sleep()和wait()

    1.所属类不同sleep()属于Thread而wait()属于Object 2.sleep()没有释放当前锁,wait()则释放了当前锁 3.sleep(0)的目的是使当前线程释放cpu,其他线程可以 ...

  9. 对四次挥手中的TIME_WAIT状态的学习

    TIME_WAIT状态不必多说    是属于四次挥手中的一种特殊状态 作用有两点简单明了  不废话 (1)可靠的实现TCP全双工连接的终止 (2)允许老的重复的.迟到的分节在网络中消逝        ...

  10. CAD安装失败怎样卸载CAD 2012？错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...