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. 使用Spring IOC容器引用外部属性文件

    一.引用外部属性文件 1.编写属性文件,以键值对形式存储,并放置在类路径(src)下 jdbc.jdbcUrl=jdbc:mysql://localhost:3306/BOOKSTORE?rewrit ...

  2. P4213 【模板】杜教筛（Sum）

    \(\color{#0066ff}{题 目 描 述}\) 给定一个正整数\(N(N\le2^{31}-1)\) 求 \(\begin{aligned} ans_1=\sum_{i=1}^n\varph ...

  3. CODEVS 1205 单词反转

    嗯.... 这道题看起来挺像一个字符串的题,但其实却错了,它实质上却用了一个栈进行了一个模拟(当然还有一种鬼畜的做法,下面也会介绍到..... 首先先看题: 时间限制: 1 s 空间限制: 12800 ...

  4. shell操作字符串案例

    #!/bin/bash name="Shell" url="http://cxy.com/" str1=$name$url #中间不能有空格 str2=&quo ...

  5. springboot整合dubbo注解方式(三)

    笔者用自己代码测试时候发现这个版本信息,可以没有,也可以制定一个就可以了,没有太大的问题,只是需要注意引入的依赖问题,两个jar与一个jar的问题, 然后就是接口公共依赖问题,案例是把我找的几个案例进 ...

  6. AngularJS页面【uib-dropdown】控件在模态窗口（弹出窗）中无法使用问题

    如果你的下拉框中有属性 dropdown-append-to-body 将它去掉,即可正常使用该插件. <div class="btn-group dropdown" uib ...

  7. HDU-Big Number (斯特林公式）

    In many applications very large integers numbers are required. Some of these applications are using ...

  8. CF E. Vasya and a Tree】 dfs+树状数组（给你一棵n个节点的树，每个点有一个权值，初始全为0，m次操作，每次三个数(v, d, x)表示只考虑以v为根的子树，将所有与v点距离小于等于d的点权值全部加上x，求所有操作完毕后，所有节点的值）

    题意: 给你一棵n个节点的树,每个点有一个权值,初始全为0,m次操作,每次三个数(v, d, x)表示只考虑以v为根的子树,将所有与v点距离小于等于d的点权值全部加上x,求所有操作完毕后,所有节点的值 ...

  9. 金融量化之tushare模块的使用

    一.TuShare简介和环境安装 TuShare是一个著名的免费.开源的python财经数据接口包.其官网主页为:TuShare -财经数据接口包.该接口包如今提供了大量的金融数据,涵盖了股票.基本面 ...

  10. 如何避免遗漏bug

    bug遗漏,我想这个是很多公司很多人头痛的一个问题.众所周知,bug是不可能被完全消灭的,当然也就意味着在发布前不能被全部找出来.于是乎当项目发布后,或多或少都会出现bug遗漏的现象,即使发布初期没有 ...