一、新版本的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. How to prevent SQL injection attacks?

    In our earlier tutorial on SQL Injection, one way to have prevented the SQL injection attack was by ...

  2. Docker的私有仓库

    server 192.168.1.107   registry   ---push client 192.168.1.103                 --pull [192.168.1.107 ...

  3. [翻译] java NIO Buffer

    原文地址:http://tutorials.jenkov.com/java-nio/buffers.html JAVA NIO 是在和channel交互的时候使用的.正如你所知道的,数据是从chann ...

  4. ubuntu15.04安装Chrome浏览器

    首先到: https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb 下载最新的安装文件. 然后: sudo a ...

  5. java项目常用 BaseDao BaseService

    java项目常用 BaseDao BaseService IBaseDao 1 package com.glht.sim.dao; 2 3  import java.util.List; 4 5 6 ...

  6. ASP.NET中的Image和ImageButton控件

    Image 控件用来显示图形.Image 控件可以显示来自位图.图标或元文件的图形,也可以显示增强的元文件.JPEG 或 GIF文件. ImageButton 控件用于显示可点击的图像. Image ...

  7. Java集合---ArrayList的实现原理

    目录: 一. ArrayList概述 二. ArrayList的实现 1) 私有属性 2) 构造方法 3) 元素存储 4) 元素读取 5) 元素删除                 6) 调整数组容量 ...

  8. 【001:转载 ubuntu下: 建立本地SVN服务器】

    1.安装 svn 工具 $sudo apt-get install subversion 2.  创建工程文件夹,用于存放工程 $mkdir ~/localsvn $mkdir ~/localsvn/ ...

  9. 设置程序集(dll)引用路径,整洁美观

    static class Program { //设置引用程序集路径 static Program() { AppDomain.CurrentDomain.SetData("PRIVATE_ ...

  10. Windows Azure Azure 简介

    平台介绍 Windows Azure作为一个微软公有云平台,被寄予了厚望. 可以说Windows Azure与Windows RT一样是微软战略转型的重点. 2012年9月微软与中国本土的电信服务提供 ...