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属性

时间: 2024-10-13 13:54:50

XMLHttpRequest upload属性的相关文章

xmlhttprequest upload

html5 带进度上传 function fileSelected() { var file = document.getElementById('fileToUpload').files[0]; if (file) { var fileSize = 0; if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'; else fileS

JS XMLHttpRequest.upload.addEventListener 传参,回调

JS 回调函数,传参的办法. function uploadFile(t) { var fd = new FormData(); fd.append("_netLogo", document.getElementById('_netLogo').files[0]); var xhr = new XMLHttpRequest(); // 原来 xhr.upload.addEventListener("progress", uploadProgress, false);

XMLHttpRequest 对象属性参数参考

readyState:提供当前 HTML 的就绪状态. readyState可能返回的值: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()). 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头). 3:请求在处理中:通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成. 4:响应已完成:您可以获取并使用服务器的响应了. status:返回当前请求的 HTTP 状态码,因为 XMLHTTP 返回成功了,不一定表示服务器已

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

跨域 XMLHttpRequest 请求 普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略. 扩展可以不受该限制. 任何扩展只要它先获取了跨域请求许可,就可以进行跨域请求. 需要特别注意的是:在请求信息中,浏览器使用 Origin 这个 HTTP 头来标识该请求来自于 http://xxx:801:在返回的响应信息中,使用 Access-Control-Allow-Origin 头来控制哪些域名的脚本可以访问该资源.如果设置 Access-Cont

JavaScript 九种跨域方式实现原理

前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容. 一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到 XSS.CSFR 等***.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源.同源策略限制内容有: Cookie.LocalStorage.IndexedDB 等存储性内容DOM 节点AJAX 请求发送

几种常见的跨域原理的实现

一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到 XSS.CSFR 等攻击.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源. 同源策略限制内容有: Cookie.LocalStorage.IndexedDB 等存储性内容 DOM 节点 AJAX 请求发送后,结果被浏览器拦截了 但是有三个标签是允许跨域加载资源: <img src=XXX&g

http预请求 options

问题 使用axios请求接口时,出现了发出两次请求的情况:一个是请求OPTIONS,一个是正常的POST请求:查资料发现与跨域请求有关. 概念 MDN中有提到: 出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求. 跨域资源共享标准允许在下列场景中使用跨域 HTTP 请求: 前文提到的由 XMLHttpRequest 或 Fetch 发起的跨域 HTTP 请求. Web 字体 (CSS 中通过 @font-face 使用跨域字体资源), 因此,网站就可以发布 TrueType 字体资源,并只

九种跨域方式实现原理

前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容. 本文完整的源代码请猛戳github 博客 一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到 XSS.CSFR 等攻击.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源. 同源策略限制内容有: Cookie.LocalStorage.IndexedDB

AJAX入门--- XMLHttpRequest对象的属性和方法

由于刚刚接触到Ajax对其比较陌生,而其中的XMLHttpRequest对象更是未曾听闻.开始学之前,了解一下它的属性和方法为它的使用做下铺垫.本文重点介绍XMLHttpRequest的属性和方法. XMLHttpRequest对象的属性和事件 属性 描述 readyState 表示XMLHttpRequest对象的状态[1] responseText 包含客户端接收到的HTTP相应的文本内容[2] responseXML 服务器响应的XML内容对应的DOM对象[3] status 服务器返回h