XMLHttpRequest upload属性
一、新版本的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属性的更多相关文章
- XMLHTTPRequest的属性和方法简介
由于现在在公司负责制作标准的静态页面,为了增强客户体验,所以经常要做些AJAX效果,也学你也和我一样在,学习AJAX.而设计AJAX时使用的一个 重要的技术(工具)就是XMLHTTPRequest对象 ...
- xmlhttprequest readyState 属性的五种状态
关于readystate五个状态总结如下: readyState 状态 状态说明(0)未初始化此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备.值 ...
- xmlhttprequest upload
html5 带进度上传 function fileSelected() { var file = document.getElementById('fileToUpload').files[0]; i ...
- JS XMLHttpRequest.upload.addEventListener 传参,回调
JS 回调函数,传参的办法. function uploadFile(t) { var fd = new FormData(); fd.append("_netLogo", doc ...
- $.ajax通用格式&&XMLHttpRequest对象属性和方法
$.ajax({ url: "", type: "POST", async: false, cache:false, //默认true data: {}, da ...
- XMLHttpRequest 对象属性参数参考
readyState:提供当前 HTML 的就绪状态. readyState可能返回的值: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()) ...
- 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 ...
- xmlHttpRequest 跨域和上传或下载进度条
跨域 XMLHttpRequest 请求 普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略. 扩展可以不受该限制. 任何扩展只要它先获取了跨域请求许可, ...
- element-ui Upload 上传组件源码分析整理笔记(十四)
简单写了部分注释,upload-dragger.vue(拖拽上传时显示此组件).upload-list.vue(已上传文件列表)源码暂未添加多少注释,等有空再补充,先记下来... index.vue ...
随机推荐
- Go-Agent原理分析及FQ介绍
作为一个程序员,相信大家是极度依赖google/stackoverflow/github的,可是国内有强大的GFW存在,以至于编程少了很多乐趣. 最近闹GFW狂潮,很多Chrome插件被封,连Shad ...
- 解决git .ignore文件无效
在用 Git 进行代码管理的时候,我们会用 .gitignore 文件来描述哪些文件是不需要进行版本管理的,也就是被忽略掉. 如果我们在第一次提交的时候,忘记添加 .gitignore 文件或者在首次 ...
- jQuery的$.get和$.ajax函数对比
$.get较为简便,但在精细控制上乏力$.get( url, // 请求的地址 {url:url,remark:remark},// 请求参数 function(data,textS ...
- ubuntu dpkg 依赖问题处理
ubuntu dpkg 依赖问题处理 使用 apt-get 安装软件期间,如果出现意外中断的情况,下次安装时会出现 dpkg 的一系列依赖问题,提示如下 :: dpkg: error processi ...
- Metro 页面间跳转报错、打包和安装一个本地的Metro类型应用
1.模板页面间传值跳转报错误 参照:http://www.cnblogs.com/dagehaoshuang/archive/2012/08/31/2665166.html#2862480 强烈推荐, ...
- final关键字用法总结
在java中,可能使用到final关键字修饰的有数据.方法和类. 一.final 修饰数据 有final修饰的数据是用来告诉编译器一块数据是恒定不变的,有时数据恒定不变是很有用的,比如: 1.一个永不 ...
- Bibtex使用方法
BibTeX 是一个使用数据库的的方式来管理参考文献程序, 用于协调LaTeX的参考文献处理. BibTeX 文件的后缀名为 .bib . 先来看一个例子: @article{Gettys90,aut ...
- 借助Glances Monitor,密切关注你的系统
两种方法安装 glances 通常可以有两种方法安装 glances.第一种是通过编译源代码的方式,这种方法比较复杂另外可能会遇到软件包依赖性问题.还有一种是使用特定的软件包管理工具来安装 glanc ...
- JS中同名函数有效执行顺序
html中如果出现函数同名时:如果有多个外部引入的js文件,例如a.js和b.js(引入顺序假定是a.js,然后是b.js),同时html中本身也有内部的js.那么针对 出现函数名一样的情况时,无论他 ...
- SQLDMO知识总结
SQLDMO(SQL Distributed Management Objects) 参考手册:http://technet.microsoft.com/en-us/library/aa312550( ...