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 ...
随机推荐
- Oracle 10g ORA-01034: ORACLE not available 错误
今天在开发系统的时候,刚开始还好好的,突然就遇到了一个错误 ORA-01034: ORACLE not available 感到莫名其妙.然后排查问题 监听器ok,各项服务ok. 最后解决办法如下: ...
- http://highscalability.com/blog/2015/5/18/how-mysql-is-able-to-scale-to-200-million-qps-mysql-cluster.html
http://highscalability.com/blog/2015/5/18/how-mysql-is-able-to-scale-to-200-million-qps-mysql-cluste ...
- P1941 飞扬的小鸟
此题很容易写出方程,由以前的知识可以迁移得,本题可以用完全背包的方法进行优化,使用滚动数组即可得到答案. //莫名奇妙60分.不知道什么细节出了错. #include <bits/stdc++. ...
- 检测PC端和移动端的方法总结(转)
正在苦逼的实习中,昨天公司让做一个页面,涉及到检测终端的问题,如果是手机设备,就跳转到指定的网页上,以前写响应式布局只要用@media screen来实现布局的差异化适应,但是现在不仅仅是布局,还要针 ...
- Objective-C objc_class 介绍
目录(?)[-] Objective-C objc_class 介绍 NSObject objc_class isa super_class name version info instanc ...
- Wordpress基础:精简头部wp_head
在Wordpress里 <?php wp_head(); ?> wp_head()是一个重要的函数,它允许插件开发者向你的站点动态地添加CSS和javascript,如果我们不在模板中引入 ...
- C++笔记----构造函数与析构函数(二)
构造函数是一种特殊的成员函数.在创建对象的时候自动调用,对对象的数据成员进行初始化. (1)栈区中创建的对象,在生存期结束的时候会自动调用析构函数. (2) 在堆上创建的对象,要由程序员显示调用del ...
- Javascript模块化编程(一):模块的写法 作者: 阮一峰
声明:转载自阮一峰的网络日志 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理. ...
- xavante运行cgilua流程
安装软件 需要安装三个lua 库: xavante wsapi cgilua luarocks install xavante http://keplerproject.github.io/xava ...
- 文本标记器vi
在打开某一类文件时,遇到了vi,当时不知是什么东西,鼠标,包括键盘上的键在文本上都没有用,后来才知道那是vi 参考文档