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. django 基础框架学习 (二)

    Django框架基础-02 Django缓存cookie 1.说明        当我们服务器在响应数据的同时,希望写⼊⼀些缓存数据到客户端        我们可以选择在响应的同时,将要写⼊到客户端的 ...

  2. 2019.2.14 考试T3 交互题

    \(\color{#0066ff}{ 题目描述 }\) 由于机房被成功拯救了,花_Q很高兴,花_Q生成了一个 0 到 N - 1 的排列(排列的下标从 0 到 N - 1 ).保证排列中 0 在 N ...

  3. 如何进bat

    既然是要谈如何进入BAT,那么咱们就从面试的角度来谈学习这件事,会谈谈一流互联网公司对于Java后端程序员的要求,相应的,也会谈谈如何达到这样的要求. 为了简单起见,这些要求分为三个层次,分别为基本要 ...

  4. Java Applet 素数小程序

    en... 1. Applet 这个远古的东西,今天我同学让我帮他看看代码,说applet运行出错.额,反正闲着也是闲着,看看呗 ,结果看到代码...4 2.就是实现这破玩意 package calc ...

  5. ssh免密登录linux服务器

    Ssh免密登录 sshd服务 sshd简介: SSH 密钥为登录 Linux 服务器提供了更好且安全的机制.运行 ssh-keygen 后,将会生成公私密钥对.你可以将公钥放置到任意服务器,从持有私钥 ...

  6. nginx与 Keepalived高可用

    1.1 keepalived软件能干什么? Keepalived软件起初是专为LVS负载均衡软件设计的, 用来管理并监控LVS集群系统中各个服务节点的状态,后来又加入了可以实现高可用的VRRP功能 K ...

  7. windows下安装TensorFlow（CPU版）

    建议先到anaconda官网下载最新windows版的anaconda3.6,然后按步骤进行安装.(这里我就不贴图了,自己下吧) 1.准备安装包 http://www.lfd.uci.edu/~goh ...

  8. pageX,clientX,offsetX,screenX,offsetLeft,style.left,offsetWidth,scrollWidth的区别以及使用详解

    https://www.cnblogs.com/echolun/p/9231760.html

  9. git使用标准

    git 使用规范 团队开发中,要遵循一个合理.清晰的git使用流程非常重要的.否则每个人提交一堆杂乱我长的commit,项目很快就变得难以协调和维护 第一步:创建新分支 首先,每一次开发新功能,都应该 ...

  10. Tomcat在处理GET和POST请求时产生的乱码问题

    最近一直在做关于Servlet的事情,常常出现乱码,很是烦人,处理乱码的方法有时候有效,有时候没有效果,今天抽个时间小结一下,以防以后再出现这种问题. 一般的处理乱码的方式都是用: request.s ...