http://dev.opera.com/articles/xhr2/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var xhr = new XMLHttpRequest();
 
var onProgressHandler = function(event) {
  if(event.lengthComputable) {
    var howmuch = (event.loaded / event.total) * 100;
    document.querySelector('progress').value = Math.ceil(howmuch);
  } else {
    console.log("Can't determine the size of the file.");
  }
}
 
var onLoadHandler = function() {
  displayLoadedMessage();
}
 
var onErrorHandler = function() {
  displayErrorMesssage();
}
 
xhr.upload.addEventListener('progress', onProgressHandler, false);
xhr.upload.addEventListener('load', onLoadHandler, false);
xhr.upload.addEventListener('error', onErrorHandler, false);
 
var onReadyStateHandler = function(event) {
  if( event.target.readyState == 4 && event.target.status == 200){
    
  }
}
 
xhr.open('POST','/path_to_data');
xhr.onreadystatechange = onReadyStateHandler;
xhr.send(dataToSend);

XHR2:js异步上传的更多相关文章

  1. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...

  2. JS异步上传Excel 并使用NPOI进行读写操作

    实现功能 导入——客户端使用 ajaxfileupload.js 插件实现Excel的异步上传,并在服务端解析成JSON字符串返回页面 导出——将页面中的grid表拼接成JSON串上传至服务器,在服务 ...

  3. ajaxfileupload.js异步上传

    转载:https://www.cnblogs.com/labimeilexin/p/6742647.html jQuery插件之ajaxFileUpload     ajaxFileUpload.js ...

  4. 关于JQuery.form.js异步上传文件点滴

    好久没动代码了,前几天朋友委托我帮忙给做几个页面,其中有个注册带图片上传的页面.已之前的经验应该很快就能搞定,没想到的是搞了前后近一天时间.下面就说说异步上传的重要几个点,希望自己下次遇到此类问题的时 ...

  5. JS异步上传文件

    直接调用Upload(option)方法,即可上传文件,不需要额外的插件辅助,采用原生js编写. /* *异步上传文件 *option参数 **url:上传路径 **data:上传的其他数据{id:& ...

  6. 关于js异步上传文件

    好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...

  7. ASP.NET MVC 使用jquery.form.js 异步上传 在IE下返回值被变为下载的解决办法

    错误记录: <script type="text/javascript"> $(function () { $(document).off("ajaxSend ...

  8. Node.js——异步上传文件

    前台代码 submit() { var file = this.$refs.fileUpload.files[0]; var formData = new FormData(); formData.a ...

  9. Js异步上传加进度条

    http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html http://www.cnblogs.com/yuanlong10 ...

  10. vue.js异步上传文件前后端代码

    上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...

随机推荐

  1. Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1) D

    Description A tree is an undirected connected graph without cycles. The distance between two vertice ...

  2. 在脚本中输入密码执行sudo,可关机等。

    如下,makexxx.sh make update-api make echo "password" | sudo -S shutdown -h now

  3. android动画(2)自定义动画

    public class CustomAnimation extends Animation { // 这个方法可以获得动画view的width,height,以及它父view的width @Over ...

  4. php传json格式给C++时乱码解决方案

    今天在做给C++传json数据时,C++无法识别到中文 网上查下原因有json只支持utf-8,但是我的整个项目编码都是utf8的,没有出现过其它编码,所以问题还是抛给了C++解决,后来经一高手解答说 ...

  5. C#基础学习2

    变量与数据类型!

  6. AJPFX总结Collection集合(上)

    出现集合类的原因 面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一个方式. 数组和集合都是容器有何不同? 数组虽也可存储对象,但长度 ...

  7. hihocoder1133 二分·二分查找之k小数

    思路: 类似于快排的分治算法. 实现: #include <iostream> #include <cstdio> #include <algorithm> #in ...

  8. QQ面板拖拽(慕课网DOM事件探秘)(上)

    QQ面板拖拽,效果如图 JavaScript代码如下: function getByClass(clsName, parent) { var oParent = parent ? document.g ...

  9. 事件对象(示例、封装函数EventUtil())

    事件对象 什么是事件对象? 在触发DOM上的事件时都会产生一个对象. 事件对象event 1.DOM中的事件对象 (1)\type属性用于获取事件类型 (2)\target属性用于获取事件目标 (3) ...

  10. Mac Outlook 15 连接office365 一直跳出登录框的问题

    解决: 比如 原登录用户名密码为 abc@xxx.com 密码:***** 改一下outlook帐号中的登录用户名为:xxx.com\abc   密码为原来密码,尝试连接,连接状态会连上,但过会儿又提 ...