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. Wannafly Camp 2020 Day 3D 求和 - 莫比乌斯反演,整除分块,STL,杜教筛

    杜教筛求 \(\phi(n)\), \[ S(n)=n(n+1)/2-\sum_{d=2}^n S(\frac{n}{d}) \] 答案为 \[ \sum_{d=1}^n \phi(d) h(\fra ...

  2. AI机器人最高等级

    AI机器人最高等级 题目描述 在小朱朱的游戏世界里,有n个AI机器人. 他们相互之间可以进行PK,胜方存活且升一级,负方直接淘汰. 高等级AI必定战胜低等级AI,同等级AI的PK结果必定一胜一负,且规 ...

  3. thinkphp3.2短信群发项目实例

    项目功能是企业给客户群发短信,我就写这么多,也不知道你能不能运行成功,如果有问题可以在QQ上问我:605114821 项目文件SMS_V2.zip下载地址,百度云:http://yun.baidu.c ...

  4. VPS性能测试shell工具以及锐速安装

    比较熟悉的UnixBench非常耗费资源,需要长时间跑满cpu和IO,很多主机商都深恶痛绝,会做各种限制,其实也代表不了实际使用的业务效果,毕竟真正需要那么多cpu和IO的应用并不多.而网络状况却是大 ...

  5. SmtpStatusCode Enum

  6. 【巨杉数据库SequoiaDB】企业级和开源领域“两开花”,巨杉引领国产数据库创新

    2019年12月15日,OSC 源创会·年终盛典在深圳圆满举行.巨杉数据库作为业界领先的金融级分布式数据库厂商, 获得 “2019年开源数据库先锋企业” 及 “2019 GVP-Gitee最有价值开源 ...

  7. 微信小程序期末复习

    过什么六一,复习不完了... 第1章作业 一.单选题(共10题,100.0分) 1以下哪个不是主流的手机操作系统? A.Android B.iOS C.Windows Phone D.Blackber ...

  8. [ZJOI2008] 生日聚会 - dp

    共有\(n\)个男孩与\(m\)个女孩打算坐成一排.对于任意连续的一段,男孩与女孩的数目之差不超过 \(k\).求方案数. \(n,m \leq 150, k \leq 20\) Solution 设 ...

  9. BZOJ3932 CQOI2015 任务查询系统 - 主席树,离散化

    记录下自己写错的地方吧 1. 区间可能有重复 2. 没有出现的坐标也要计入version (因为询问里可能会有) #include <bits/stdc++.h> using namesp ...

  10. 开发过程中遇到的代理Proxy配置问题

    proxy代理问题 在公司不能访问外网的时候,使用IDEA开发.. 需要配置IDEA Proxy Maven Git IDEA开发工具Proxy配置,使用Spring Boot快读构建工具 Maven ...