var xhrOnProgress=function(fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
//文件上传 快速
function newFileUpload(_this){
var fd = new FormData();
fd.append("paragram", 12345); //上传的参数名 参数值 k-v键值对
fd.append("upfile", $("#upfile").get(0).files[0]);//上传的文件file
ajaxRe =$.ajax({
url: "${ctx}/platform/system/sysFile/fileUpload.ht",
type: "POST",
processData: false,
contentType: false,
data: fd,
success: function(data) {
$("#loading_upload").hide(20);
var fileId=JSON.parse(data).fileId;
var fileName=JSON.parse(data).fileName;
$("#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>')
var obj={};
obj.id=fileId
obj.name=fileName
uploadArr.push(obj);
$("#filelist").html(JSON.stringify(uploadArr));
$("#upfile").val("")
},
xhr:xhrOnProgress(function(e){
var percent=e.loaded / e.total * 100;//计算百分比
$("#progess").html(percent.toFixed(2));
}),
beforeSend: function(){
$("#loading_upload").show(20);
},
}) }
function canceled_upload(){
ajaxRe.abort()
$("#upfile").val("")
$("#loading_upload").hide(20);
}

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. hdu 2112 HDU Today(map与dijkstra的结合使用)

    HDU Today Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  2. Python排列组合

    product 笛卡尔积 (有放回抽样排列) permutations 排列 (不放回抽样排列) combinations 组合,没有重复 (不放回抽样组合) combinations_with_re ...

  3. python3爬虫-分析Ajax,抓取今日头条街拍美图

    # coding=utf-8 from urllib.parse import urlencode import requests from requests.exceptions import Re ...

  4. Java并发—线程常用方法总结

    1.join()方法 join —— 让一个线程等待另一个线程完成才继续执行.如A线程线程执行体中调用B线程的join()方法,则A线程被阻塞,知道B线程执行完为止,A才能得以继续执行. public ...

  5. CoreThink主题开发(九)使用H-ui开发博客主题之用户个人主页

    感谢H-ui.感谢CoreThink!  效果图: 这里使用table布局 /Theme/Blog/User/Index/home.html <extend name="$_home_ ...

  6. 剑指offer 面试12题

    面试12题: 题目:矩阵中的路径 题:请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格 ...

  7. Hadoop学习基础之三:MapReduce

    现在是讨论这个问题的不错的时机,因为最近媒体上到处充斥着新的革命所谓“云计算”的信息.这种模式需要利用大量的(低端)处理器并行工作来解决计算问题.实际上,这建议利用大量的低端处理器来构建数据中心,而不 ...

  8. XP、win7下Excel 2007多窗口打开Excel的解决方法

    http://blog.x6x8.com/?p=330 Win7下的方法(借鉴了XP的方法): 1.先在桌面先建一个txt文件,将下面的代码复制进去 32位WIN7复制下面一行start “Excel ...

  9. width

    position:absolute 其widht:%是想对于最近的已经定位的父元素,如果没有就想对于body widht 是指的内容区的with,设置除了width其他的元素都会使元素变的比width ...

  10. HP小型机维护

    (一)文件系统维护 . 监控文件系统的使用 # bdf . 监控文件目录的使用 # du -sk /myfs2/* (二)网络系统维护 1. 相关配置文件 1). 主机名定义文件:/etc/hosts ...