1. var xhrOnProgress=function(fun) {
  2. xhrOnProgress.onprogress = fun; //绑定监听
  3. //使用闭包实现监听绑
  4. return function() {
  5. //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
  6. var xhr = $.ajaxSettings.xhr();
  7. //判断监听函数是否为函数
  8. if (typeof xhrOnProgress.onprogress !== 'function')
  9. return xhr;
  10. //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
  11. if (xhrOnProgress.onprogress && xhr.upload) {
  12. xhr.upload.onprogress = xhrOnProgress.onprogress;
  13. }
  14. return xhr;
  15. }
  16. }
  17. //文件上传 快速
  18. function newFileUpload(_this){
  19. var fd = new FormData();
  20. fd.append("paragram", 12345); //上传的参数名 参数值 k-v键值对
  21. fd.append("upfile", $("#upfile").get(0).files[0]);//上传的文件file
  22. ajaxRe =$.ajax({
  23. url: "${ctx}/platform/system/sysFile/fileUpload.ht",
  24. type: "POST",
  25. processData: false,
  26. contentType: false,
  27. data: fd,
  28. success: function(data) {
  29. $("#loading_upload").hide(20);
  30. var fileId=JSON.parse(data).fileId;
  31. var fileName=JSON.parse(data).fileName;
  32. $("#fileList_upload").html($("#fileList_upload").html()+'<div style="font-size:15px;height:28px;line-height:28px"><span fileid="'+fileId+'" name="attach" file="'+fileId+','+fileName+'" res="oa" filename="'+fileName+'">'+fileName+'</span>&nbsp;&nbsp;<img onclick="AttachMent.download(this);" style="width:15px;height:15px" src="/oa/styles/common/img/enclosure/download.png">&nbsp;&nbsp;<img onclick="AttachMent.view(this);" style="width:15px;height:15px" src="/oa/styles/common/img/enclosure/preview.png">&nbsp;&nbsp;<img onclick="mailDelFile('+fileId+',this);" style="width:15px;height:15px" src="/oa/styles/common/img/enclosure/delete.png"></div>')
  33. var obj={};
  34. obj.id=fileId
  35. obj.name=fileName
  36. uploadArr.push(obj);
  37. $("#filelist").html(JSON.stringify(uploadArr));
  38. $("#upfile").val("")
  39. },
  40. xhr:xhrOnProgress(function(e){
  41. var percent=e.loaded / e.total * 100;//计算百分比
  42. $("#progess").html(percent.toFixed(2));
  43. }),
  44. beforeSend: function(){
  45. $("#loading_upload").show(20);
  46. },
  47. })
  48.  
  49. }
  50. function canceled_upload(){
  51. ajaxRe.abort()
  52. $("#upfile").val("")
  53. $("#loading_upload").hide(20);
  54. }

jquery获取上传进度和取消上传操作的更多相关文章

  1. Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...

  2. js实现带上传进度的文件上传

    //获取文件筐的文件集合 var files = document.getElementById("file1").files; //创建FormData对象 相当于参数集合 存储 ...

  3. 小谢第7问:js前端如何实现大文件分片上传、上传进度、终止上传以及删除服务器文件?

    文件上传一般有两种方式:文件流上传和base64方式上传,毫无疑问,当进行大文件上传时候,转为base64是不现实的,因此用formData方式结合文件流,直接上传到服务器 本文主要结合vue的来讲解 ...

  4. Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素(转)

    var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个 ...

  5. js jquery获取当前元素的兄弟级 上一个 下一个元素

    原博地址:http://www.jb51.net/article/71782.htm var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNod ...

  6. js jquery获取当前元素的兄弟级 上一个 下一个元素 jquery如何获取第一个或最后一个子元素

    var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得 ...

  7. jQuery 获取和设置radio 和 checkbox 值的操作

    jquery 中的val(),可以取值也可赋值,表单元素中的radio和checkbox是比较常用的控件,下面说说对它们的取值和赋值的使用 1.取值 表单如下: <div class=" ...

  8. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  9. PHP利用Session实现上传进度

    实现文件上传进度条基本是依靠JS插件或HTML5的File API来完成,其实PHP配合ajax也能实现此功能. PHP手册对于session上传进度是这么介绍的: 当 session.upload_ ...

随机推荐

  1. Linux中权限管理之ACL权限

    1.简介: a.作用: 是为了防止权限不够用的情况,一般的权限有所有者.所属组.其他人这三种,当这三种满足不了我们的需求的时候就可以使用ACL权限 b.故事背景: 一个老师,给一个班的学员上课,他在l ...

  2. Android学习资源网站大全

    https://github.com/zhujun2730/Android-Learning-Resources 整理了一些 Android 的博客链接.学习资源网站.站在巨人的肩膀上,会看得更远.整 ...

  3. Java基础—复用类

    复用代码是Java众多引人注目的功能之一. 一般而言,实现代码重用java提供了两种方式:组合以及继承. 组合:新的类由现有类的对象所组成.(复用现有代码的功能,而非它的形式) 继承:按照现有类的类型 ...

  4. Java - 在控制台中执行一个可执行jar

    1.Maven打包一个可执行jar: <build> <plugins> <plugin> <groupId>org.apache.maven.plug ...

  5. 解决远程桌面关闭后teamviewer不能连接的问题

    使用windows远程桌面连接远程电脑,在关闭远程桌面后,windows系统会锁定,此时再用teamviewer连接会出现“无法捕捉画面”或者“拒绝连接”的问题. 解决办法:设置要连接的远程电脑上的t ...

  6. Service Fusing

    服务熔断也称服务隔离,来自于Michael Nygard 的<Release It>中的CircuitBreaker应用模式,Martin Fowler在博文CircuitBreaker中 ...

  7. linux 定时任务未执行php脚本

    1,对于无法执行php文件,首先你应该考虑的问题是是否php代码有错误,你可以先检查一下你的php代码,或者可以在linux上面执行一下这个文件,看是否能够执行成功:如果成功了,就说明是crontab ...

  8. HTTP学习笔记02-HTTP报文格式之概述

    HTTP学习笔记02-HTTP报文格式之概述 HTTP学习笔记02-HTTP报文格式之概述 HTTP报文格式 报文的语法 起始行 首部 实体部分 学习一个协议感觉最有意思的就是看包结构…在我看来这是唯 ...

  9. vi高级命令集锦

    .交换两个字符位置 xp .上下两行调换 ddp .把文件内容反转 :g/^/m0/ (未通过) .上下两行合并 J .删除所有行 dG .从当前位置删除到行尾 d$ .从当前位置复制到行尾 y$ 如 ...

  10. Ubuntu16.04下编译android6.0源码

    http://blog.csdn.net/cnliwy/article/details/52189349 作为一名合格的android开发人员,怎么能不会编译android源码呢!一定要来一次说编译就 ...