一、新版本的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. 将类型(int,string,…)转换为 T 类型

    方法定义: private static T GetValueByKey<T>(string key) where T : IConvertible { T localVal=defaul ...

  2. SQL2008关于quotename的用法

    ),) set @tbname='index' ---查这个表里的数据: print(@tbname) set @sql = 'select * from '+QUOTENAME(@tbname) p ...

  3. 对于指定区块div,如何区分区块内的点击 和 区块外的点击?

    需求:对于区块div内点击事件, 需要展示区块内的附属操作区块,对于区块外的点击, 需要将前面说的附属操作区块隐藏掉. 分析:对于一般的HTML控件,有标准的js事件接口, focus和blur,来实 ...

  4. zabbix报警媒介------>微信报警

    zabbix报警媒介------>微信报警 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 欢迎加入高级运维工程师之路:598432640 微信在我们的生活中使用的比较频繁,有 ...

  5. laravel----------------自动生成模型,控制器,视图的操作步骤。

    首先要阅读这篇文章,你一定已经掌握了composer 和 artisan . 第一步,打开https://packagist.org/这个网址,在搜索框内输入way/generators 如图 第二步 ...

  6. 【selenium 3】 Mac 下测试环境搭建 Firefox 47+ gecko driver Mac

    错误代码如下:File "/usr/local/lib/python2.7/dist-packages/selenium-3.0.0b2-py2.7.egg/selenium/webdriv ...

  7. PHP之十六个魔术方法详解

    https://segmentfault.com/a/1190000007250604#articleHeader14

  8. JS中反斜杠和单双引号的配合使用效果

    <div id="tag"></div> <div id="tag1"></div> <div id=&q ...

  9. C语言回顾-函数和位运算

    1.函数的概述 功能独立的代码块 C语言由若干函数组成 1)从定义分,库函数和用户定义函数两种 2)从返回值分,有返回值函数和无返回值函数 3)从参数分,无参函数和有参函数 2.形参和实参 1)形参定 ...

  10. MSSQL优化之索引优化

    一.认识索引 (一)深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录.微软的SQL SERVER提供了两种索引:聚集索引(clustered index,也称聚类索引.簇集索引)和非聚集 ...