var fd=new FormData();
$('.mwd_uppingzheng_btna_ok').on('click',function () {
// 数组转 str
var strarr=JSON.stringify(arr_clip);
// 给fd添加 str
fd.append("file", strarr);
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 上传的时候 添加监听
xhr.upload.addEventListener("progress", uploadProgress, false);
// 上传完毕 添加结束事件
xhr.addEventListener("load", uploadComplete, false);
// 上传错误 的事件
xhr.addEventListener("error", uploadFailed, false);
// 用户取消的事件
xhr.addEventListener("abort", uploadCanceled, false);
// 后台接口
xhr.open("POST", "${pageContext.request.contextPath }/upload");//修改成自己的接口
xhr.send(fd);
// 展示 进度弹窗
$('.mdw_uploadingfn').show();
})
// 上传中
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percent = Math.round(evt.loaded * / evt.total);
$('.mdw_uploading_contgiffn').html(percent+'%');
}
else {
$('.mdw_uploading_contgiffn').html('无法计算');
}
}
// 上传结束
function uploadComplete(evt) {
/* 服务器端返回响应时候触发event事件*/
$('.mdw_uploadingfn').hide();
$('.mdw_uploading_contgiffn').html(+'%');
arr_clip=[];
// 展示缩略图
show_arr_clips();
}
// 无法上传
function uploadFailed(evt) {
alert("无法上传");
}
// 用户取消
function uploadCanceled(evt) {
alert("用户取消了上传");
}

xhr 的 onpregress 监听上传数据的 已上传 和 总大小的更多相关文章

  1. Android 监听ContentProvider的数据改变

    今天介绍一下怎么监听ContentProvider的数据改变,主要的方法是:getContext().getContentResolver().notifyChange(uri,null),这行代码是 ...

  2. Android_通过ContentObserver监听短信数据变化

    1.简单介绍 在小米等一些机型,无法接收系统发出的短信广播. 仅仅能通过观察者ContentObserver,去监听短信数据的变化 2.SMS数据介绍 content://sms/inbox     ...

  3. 20、解决Vue使用bus兄弟组件间传值,第一次监听不到数据

    1.新建bus.js文件: import Vue from 'vue' export default new Vue; 2.在需要通信组件A,B中引入bus: A组件: import Bus from ...

  4. 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化

    使用通配符监听所有自数据字段的变化

  5. 小程序批量获取input的输入值,监听输入框,数据同步

    在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事件来同步数据.这样做很麻烦.下面的方法可以解决,只需要一个方 ...

  6. angularjs -- 监听angularJs列表数据是否渲染完毕

    前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这几天就一直遇到在列表和表格渲染完毕后,执行点击和选择操作.对于angularjs处理这类问题,最好的方式就是指令 directive. ...

  7. 黎活明8天快速掌握android视频教程--21_监听ContentProvider中数据的变化

    采用ContentProvider除了可以让其他应用访问当前的app的数据之外,还有可以实现当app的数据发送变化的时候,通知注册了数据变化通知的调用者 其他所有的代码都和第20讲的一样,不同的地方看 ...

  8. .Net客户端监听ZooKeeper节点数据变化

    一个很简单的例子,用途是监听zookeeper中某个节点数据的变化,具体请参见代码中的注释 using System; using System.Collections.Generic; using ...

  9. 监听指定端口数据交互(HttpListenerContext )

    很怀念以前做机票的日子,,,,可惜回不去 以前的项目中的,拿来贴贴 场景:同步第三方数据,监听指定地址(指定时间间隔,否则不满足,因为需要处理粘包问题,改篇未实现) 主要内容四个文件:下面分别说下每个 ...

随机推荐

  1. 使用Beautiful Soup爬取猫眼TOP100的电影信息

    使用Beautiful Soup爬取猫眼TOP100的电影信息,将排名.图片.电影名称.演员.时间.评分等信息,提取的结果以文件形式保存下来. import time import json impo ...

  2. ECMAScript基本语法——⑤运算符 比较运算符

    ><>=<======全等于 比较运算符 Java中只能比类型相同的,JavaScript没有限制比较方式 1.类型相同:直接比较 字符串:安装字典顺序比较.按位逐一比较直到比 ...

  3. 大话STM32F103系统架构

    前言 许多像我一样的STM32初学者,都往往忽视了STM32系统架构的学习.这对于实际应用并没有啥大的影响,但是总感觉怎么学也无法看清STM32的全貌,所以本文我将带领大家一起厘清STM32F103的 ...

  4. 《剑指Offer》各面试题总结

    目录 前言 面试题4 二维数组的查找 面试题5:替换空格 面试题6:从尾到头打印链表 面试题7:重建二叉树 面试题8:二叉树的下一个节点 面试题9:用两个栈实现队列 面试题10:斐波那契数列 面试题1 ...

  5. Educational Codeforces Round 81 (Rated for Div. 2) C. Obtain The String

    题目链接:http://codeforces.com/contest/1295/problem/C 题目:给定字符串s,t.  给定一个空串z,需要按照规则把z构造成 string z == stri ...

  6. liunx 查找locate

    使用 安装 yum install mlocate 更新数据库 updatedb 查找my.cnf文件 locate my.cnf

  7. 如何与GitHub同步,将本地文件push到到远程仓库

    Run git config --global user.email "you@example.com" git config --global user.name "Y ...

  8. maven通过pom文件下载相关依赖包的网址

    下载有关依赖插件的网址去MVNREPOSITORY仓库寻找对应的版本然后添加到pom文件中就可以自动下载了 网址为:https://mvnrepository.com

  9. Python之路Day08

    文件操作 open() -- 打开 open通过Python控制操作系统打开文件 f=open('文件路径',mode='r',encoding='utf-8') mode -- 不写就默认是r f ...

  10. arm9特点

    ARM9主要特点 ARM 处理器凭借它的低功耗.高性能等特点,被广泛应用于个人通信等嵌入式领域,而ARM7 也曾在中低端手持设备中占据了一席之地.然而,ARM7 的处理性能逐渐无法满足人们日益增长的高 ...