1. var fd=new FormData();
  2. $('.mwd_uppingzheng_btna_ok').on('click',function () {
  3. // 数组转 str
  4. var strarr=JSON.stringify(arr_clip);
  5. // 给fd添加 str
  6. fd.append("file", strarr);
  7. // 创建xhr对象
  8. var xhr = new XMLHttpRequest();
  9. // 上传的时候 添加监听
  10. xhr.upload.addEventListener("progress", uploadProgress, false);
  11. // 上传完毕 添加结束事件
  12. xhr.addEventListener("load", uploadComplete, false);
  13. // 上传错误 的事件
  14. xhr.addEventListener("error", uploadFailed, false);
  15. // 用户取消的事件
  16. xhr.addEventListener("abort", uploadCanceled, false);
  17. // 后台接口
  18. xhr.open("POST", "${pageContext.request.contextPath }/upload");//修改成自己的接口
  19. xhr.send(fd);
  20. // 展示 进度弹窗
  21. $('.mdw_uploadingfn').show();
  22. })
  23. // 上传中
  24. function uploadProgress(evt) {
  25. if (evt.lengthComputable) {
  26. var percent = Math.round(evt.loaded * / evt.total);
  27. $('.mdw_uploading_contgiffn').html(percent+'%');
  28. }
  29. else {
  30. $('.mdw_uploading_contgiffn').html('无法计算');
  31. }
  32. }
  33. // 上传结束
  34. function uploadComplete(evt) {
  35. /* 服务器端返回响应时候触发event事件*/
  36. $('.mdw_uploadingfn').hide();
  37. $('.mdw_uploading_contgiffn').html(+'%');
  38. arr_clip=[];
  39. // 展示缩略图
  40. show_arr_clips();
  41. }
  42. // 无法上传
  43. function uploadFailed(evt) {
  44. alert("无法上传");
  45. }
  46. // 用户取消
  47. function uploadCanceled(evt) {
  48. alert("用户取消了上传");
  49. }

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. 【JavaScript Weekly】#471 — JANUARY 17, 2020

    https://javascriptweekly.com/issues/471 #471 — JANUARY 17, 2020 READ ON THE WEB JavaScript Weekly Ba ...

  2. 如何在任意文件下启动jupyter notebook,而不用担心环境配置问题

    网上看了很多帖子,说可以写一个bat文件,将bat文件放在你想启动jupyter notebook的地方.可是不行,不能解决我的问题!!!!!!!!!!! 网上是这样说的: ######这为引用### ...

  3. 开始自学JAVA了,找到一点有用的资料(不定时更新)

    入门代码https://blog.csdn.net/salmonwilliam/article/details/81952387 高精度https://www.cnblogs.com/downrain ...

  4. setTimeout(call,0)作用

    setTimeout(call,0)作用  经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用, ...

  5. The Softmax function and its derivative

    https://eli.thegreenplace.net/2016/the-softmax-function-and-its-derivative/  Eli Bendersky's website ...

  6. 401 WebEx会议教程一 —— 参加会议

    · WebEx会议教程一 —— 参加会议 参加他人发起的会议 1.  在邀请邮件中,接受对方的会议邀请: 2.  一般在WebEx会议开始前15分钟时,邮箱客户端会提醒您 (如下图类似提示) 3.   ...

  7. springBoot 发送邮件图片不显示

    解决方案 MimeMessageHelper 的执行顺序错了,先执行 setText() 然后执行 addInline() 添加图片 <img src="cid:p03"/& ...

  8. IntelliJ WebStorm 最新版 安装永久破解教程【最强,可用至2099年】

    IntelliJ WebStorm 2018.3.6安装永久破解[最强]  一. 在官网下载WebStorm安装包  链接:http://www.jetbrains.com/webstorm/down ...

  9. Redis Desktop Manager 连接不上redis的问题

    1.需要启动redis,进入后测试,ping,回应pong,说明redis可用 启动redis的代码: redis-server /myredis/redis.conf redis-cli 如果还是连 ...

  10. 采用PHP实现”服务器推”技术的聊天室

      传统的B/S结构的应用程序,都是采用”客户端拉”结束来实现客户端和服务器端的数据交换. 本文将通过结合Ticks(可以参看我的另外一篇文章:关于PHP你可能不知道的-PHP的事件驱动化设计),来实 ...