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. php 字符串常用函数

    数组.字符串和数据库是我们函数里面最.最.最常用的三类函数. 当然PHP的字符串函数也有很多.我们最常使用的两个系列的字符串: 1.单字节字符串处理函数 2.多字节字符串处理函数 3.字符串编码转换函 ...

  2. 两个html页面之间传值

    参考网址:https://blog.csdn.net/csdn_ds/article/details/78393564?locationNum=8&fps=1

  3. C# LINQ学习笔记三:LINQ to OBJECT之操作字符串

    本笔记摘抄自:https://www.cnblogs.com/liqingwen/p/5814204.html,记录一下学习过程以备后续查用. 一.统计单词在字符串中出现的次数 请注意,若要执行计数, ...

  4. SpringBoot整合WEB开发--(九)整合Servlet,Filter,Listener

    简介: 如果需要整合第三方框架时,可能还是不得不使用Servlet,Filter,Listener,Springboot中也有提供支持. @WebServlet("/my") pu ...

  5. 使用xshell

    将选定的文本自动复制到剪贴板 并且 鼠标向右按钮定义为粘贴剪贴板内容

  6. 洛谷P1551 亲戚 (并查集模板题)

    链接 https://www.luogu.org/problemnew/show/P1551 代码 #include<bits/stdc++.h> using namespace std; ...

  7. Milking Time POJ - 3616 dp 感觉像背包

    #include<iostream> #include<algorithm> #include<cstring> #include<cstdio> us ...

  8. vjudge A Funny Game 思维题 (其实今天讲的全是数学。。。)

    原文链接https://vjudge.net/contest/331993#problem/H Alice and Bob decide to play a funny game. At the be ...

  9. Codeforces 577A - Multiplication Table

    Let's consider a table consisting of n rows and n columns. The cell located at the intersection of i ...

  10. C#继承是个啥

    继承: 字面意思就是继承 如地主老王有500亩地,老王的儿子小王可以种这五百亩地可以随便拿这五百亩地上面的任何东西 如Controller 你要用从一个controller调用另一个controlle ...