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. socketserver,threading

    一,socketserver  #server import socketserver class Myserver(socketserver.BaseRequestHandler): def han ...

  2. pacman命令用法

    Pacman 是一个命令行工具,这意味着当你执行下面的命令时,必须在终端或控制台中进行. 1.更新系统 在 Arch Linux 中,使用一条命令即可对整个系统进行更新: pacman -Syu 如果 ...

  3. springcloud系列五 feign远程调用服务

    一:Feign简介 Feign 是一种声明式.模板化的 HTTP 客户端,在 Spring Cloud 中使用 Feign,可以做到使用 HTTP请求远程服务时能与调用本地方法一样的编码体验,开发者完 ...

  4. matplotlib学习笔记（四）

    利用matplotlib可以显示图像 imread()和imshow()提供了简单的图像载入和显示功能. img = plt.imread("xxx.jpg") imread()可 ...

  5. Codeforces Round #482 (Div. 2) B、Treasure Hunt（模拟+贪心）979B

    题目 大致题意 n表示要进行n次操作,接着给出三个字符串,表示三个人初始拥有的串.每次操作要替换字符串中的字母,询问最后在游戏中曾出现过的相同的子串谁最多. 思路 (1)  讨论最多的子串,肯定是全部 ...

  6. MongoDB安装为windows服务

    MongoDB 下载 下载地址:http://www.mongodb.org/downloads 下载安装完成之后 第一步 创建D:\Program Files\mongodb\data 目录第二步 ...

  7. 技巧：开启ubuntu系统的ssh服务

    执行下述命令,安装 openssh 服务器. $ sudo apt-get install openssh-server 执行下面命令,启动 openssh $ sudo service ssh st ...

  8. 08-----pymysql模块使用

    pymysql的下载和使用 exctue() 之sql注入 增.删.改:conn.commit() 查:fetchone.fetchmany.fetchall   一.pytmysql的下载和使用  ...

  9. SQL---MySQL数据库---试炼

    1.需求 user表 temp表 user_temp_salary表 1.1 查找每个人在2018年前2个月的平均工资信息 SELECT b.`name` AS userName,c.name AS ...

  10. CentOS 同时忘记用户名和密码

    开机时,狂按Esc 光标选中之前开机常用的那个系统,按下e进入编辑模式 按'↑'和'↓'在该页面找到quiet,在它后面加上single 按Ctrl + x进入到单用户模式 再次进入后,系统会提示你输 ...