xhr 的 onpregress 监听上传数据的 已上传 和 总大小
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 监听上传数据的 已上传 和 总大小的更多相关文章
- Android 监听ContentProvider的数据改变
今天介绍一下怎么监听ContentProvider的数据改变,主要的方法是:getContext().getContentResolver().notifyChange(uri,null),这行代码是 ...
- Android_通过ContentObserver监听短信数据变化
1.简单介绍 在小米等一些机型,无法接收系统发出的短信广播. 仅仅能通过观察者ContentObserver,去监听短信数据的变化 2.SMS数据介绍 content://sms/inbox ...
- 20、解决Vue使用bus兄弟组件间传值,第一次监听不到数据
1.新建bus.js文件: import Vue from 'vue' export default new Vue; 2.在需要通信组件A,B中引入bus: A组件: import Bus from ...
- 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化
使用通配符监听所有自数据字段的变化
- 小程序批量获取input的输入值,监听输入框,数据同步
在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事件来同步数据.这样做很麻烦.下面的方法可以解决,只需要一个方 ...
- angularjs -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这几天就一直遇到在列表和表格渲染完毕后,执行点击和选择操作.对于angularjs处理这类问题,最好的方式就是指令 directive. ...
- 黎活明8天快速掌握android视频教程--21_监听ContentProvider中数据的变化
采用ContentProvider除了可以让其他应用访问当前的app的数据之外,还有可以实现当app的数据发送变化的时候,通知注册了数据变化通知的调用者 其他所有的代码都和第20讲的一样,不同的地方看 ...
- .Net客户端监听ZooKeeper节点数据变化
一个很简单的例子,用途是监听zookeeper中某个节点数据的变化,具体请参见代码中的注释 using System; using System.Collections.Generic; using ...
- 监听指定端口数据交互(HttpListenerContext )
很怀念以前做机票的日子,,,,可惜回不去 以前的项目中的,拿来贴贴 场景:同步第三方数据,监听指定地址(指定时间间隔,否则不满足,因为需要处理粘包问题,改篇未实现) 主要内容四个文件:下面分别说下每个 ...
随机推荐
- centos6离线安装apache2.4
在/usr/local中新建文件夹 Apache2.4,将httpd安装包放入该文件夹, 解压:tar xvf httpd-2.4.41.tar.gz 进入httpd-2.4.41文件夹中,对Apac ...
- 在linux中安装nginx
linux系统安装在vmware中,首先在主机中利用shell工具与虚拟机连接 1.在linux中查看虚拟机的ip地址 在终端输入 ifconfig 红框里面就是ip地址 2.在主机中打开shell工 ...
- php redis使用
访问连接 远程访问 //实例化 $redis=new Redis(); try{ $redis->connect('47.98.55.11','6379'); $redis->auth(' ...
- display: inline-block 布局
三个元素display: inline-block; 布局 ,其中一个元素中存在其他元素也用了display: inline-block; 无法垂直居中,将这个元素设置为display: inline ...
- asp.net web core 开发问题汇总(1)
1 ASP.NET Core 设置默认静态起始页 转载地址:ASP.NET Core 设置默认起始页(如default.html) 注:1 默认情况下ASP.NET Core应用程序时不支持静态 ...
- 请求 - axios
实际应用示例 前端不需要做统一的接口防重 前端无法通过判断接口是否返回来释放按钮(因为可以手动刷新页面,将导致刷新前请求丢失) 后端对接口做了防重 通过增加时间戳避免IE9的get请求缓存问题 axi ...
- java面试记录二:spring加载流程、springmvc请求流程、spring事务失效、synchronized和volatile、JMM和JVM模型、二分查找的实现、垃圾收集器、控制台顺序打印ABC的三种线程实现
注:部分答案引用网络文章 简答题 1.Spring项目启动后的加载流程 (1)使用spring框架的web项目,在tomcat下,是根据web.xml来启动的.web.xml中负责配置启动spring ...
- caffe+win10+git使用sh文件
在windows下是否可以执行sh文件呢,搜了一下,可以安装了git就可以执行,当然这不是唯一答案. 然后联想到caffe下有一些.sh文件可以尝试,就用create_mnist.sh尝试把. cre ...
- 创建登录WEB UI页面的Business role.
1: Define business role 2: business role 中可以指定 config key, 该config key可以用于UI configurationo determ ...
- Selenium3+python自动化009- js之屏幕滑动和日历操作
一.js的滑屏 1)以下脚本实现js滑屏scroll="document.documentElement.scrollTop=800"#垂直滚动 pxscroll = " ...