一、新版本的XMLHttpRequest对象,传送数据的时候,有一个progress事件,用来返回进度信息。

它分成上传和下载两种情况

1)下载的progress事件属于XMLHttpRequest对象

2)上传的progress事件属于XMLHttpRequest.upload对象。

先定义progress事件的回调函数。

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;

然后,在回调函数里面,使用这个事件的一些属性。

function updateProgress(event) {
if(event.lengthComputable) {
var percentComplete = event.loaded / event.total;
}
}

上面的代码中,event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0。

与progress事件相关的,还有其他五个事件,可以分别指定回调函数: 
* load事件:传输成功完成。

* abort事件:传输被用户取消。

* error事件:传输中出现错误。

* loadstart事件:传输开始。

* loadEnd事件:传输结束,但是不知道成功还是失败。

-----------------------------2016-8-4 12:08:23--

    source:【1】XMLHttpRequest upload属性

XMLHttpRequest upload属性的更多相关文章

  1. XMLHTTPRequest的属性和方法简介

    由于现在在公司负责制作标准的静态页面,为了增强客户体验,所以经常要做些AJAX效果,也学你也和我一样在,学习AJAX.而设计AJAX时使用的一个 重要的技术(工具)就是XMLHTTPRequest对象 ...

  2. xmlhttprequest readyState 属性的五种状态

    关于readystate五个状态总结如下: readyState 状态    状态说明(0)未初始化此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备.值 ...

  3. xmlhttprequest upload

    html5 带进度上传 function fileSelected() { var file = document.getElementById('fileToUpload').files[0]; i ...

  4. JS XMLHttpRequest.upload.addEventListener 传参,回调

    JS 回调函数,传参的办法. function uploadFile(t) { var fd = new FormData(); fd.append("_netLogo", doc ...

  5. $.ajax通用格式&&XMLHttpRequest对象属性和方法

    $.ajax({ url: "", type: "POST", async: false, cache:false, //默认true data: {}, da ...

  6. XMLHttpRequest 对象属性参数参考

    readyState:提供当前 HTML 的就绪状态. readyState可能返回的值: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()) ...

  7. Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题,但ajax提交有跨域问题? XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求(preflight request)

    https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...

  8. xmlHttpRequest 跨域和上传或下载进度条

    跨域 XMLHttpRequest 请求 普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略. 扩展可以不受该限制. 任何扩展只要它先获取了跨域请求许可, ...

  9. element-ui Upload 上传组件源码分析整理笔记(十四)

    简单写了部分注释,upload-dragger.vue(拖拽上传时显示此组件).upload-list.vue(已上传文件列表)源码暂未添加多少注释,等有空再补充,先记下来... index.vue ...

随机推荐

  1. 虚拟机设置静态ip

    最近学习hadoop,用到虚拟机来做分布式,由于hadoop要配置slave节点的主机名,所以需要修改hosts文件的ip地址和主机名的映射关系. 但是虚拟机每次重启后,ip地址都会变 ,这样每次都得 ...

  2. setAlpha方法 设置透明度

    public void setAlpha (int x) 其中,参数x为透明度,取值范围为0~255,数值越小越透明.

  3. 【Algorithms】归并排序(merge sort)

    几个比较常见的排序算法里头,这个我是比较生疏的一个,有一天突然被问了一个问题是,归并排序最大的特点是什么,我才想起这个算法来.下午又看不进书啦,就实现一下,记下来. 归并排序采取的是分治策略,就是先将 ...

  4. LightOj 1220 - Mysterious Bacteria (分解质因子x=b^p 中的 x 求最大的 p)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1220 题意:已知 x=bp 中的 x 求最大的 p,其中 x b p 都为整数 x = ...

  5. 参数中带有“&”符号问题

    今天写程序时遇到一个问题: /login.do?service=9861.htm?id=117&pageNo=1 这个链接中有两个问号,以至于后台取参数 service的值时把 &pa ...

  6. tomcat的maxThreads、acceptCount(最大线程数、最大排队数)

    转载:http://blog.sina.com.cn/s/blog_605f5b4f01012ljj.html tomcat 的Connector配置如下 <Connector port=&qu ...

  7. [转]C++11 多线程

    转载自:http://www.cnblogs.com/zhuyp1015/archive/2012/04/08/2438288.html C++11开始支持多线程编程,之前多线程编程都需要系统的支持, ...

  8. Windows Server 2008R2服务器安装及设置教程

    第一篇:系统安装与设置 前言本安装及设置教程适用于使用Windows2008R2为操作系统的服务器,目的是让服务器实现下列环境.语言脚本环境:ASP.ASP.Net1.1.ASP.Net2.0.ASP ...

  9. Python之路-python(装饰器、生成器、迭代器、Json & pickle 数据序列化、软件目录结构规范)

    装饰器: 首先来认识一下python函数, 定义:本质是函数(功能是装饰其它函数),为其它函数添加附件功能        原则:        1.不能修改被装饰的函数的源代码.        2.不 ...

  10. textarea与XSS攻击

    textarea用法 一般是用来接收用户输入,用于提交到服务器端,例如 网站的评论框. 如果此框也用于显示服务器端回传的内容,则有如下两种用法 法1 后台直接插入 <textarea>&l ...