jquery获取上传进度和取消上传操作
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> <img onclick="AttachMent.download(this);" style="width:15px;height:15px" src="/oa/styles/common/img/enclosure/download.png"> <img onclick="AttachMent.view(this);" style="width:15px;height:15px" src="/oa/styles/common/img/enclosure/preview.png"> <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获取上传进度和取消上传操作的更多相关文章
- Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...
- js实现带上传进度的文件上传
//获取文件筐的文件集合 var files = document.getElementById("file1").files; //创建FormData对象 相当于参数集合 存储 ...
- 小谢第7问:js前端如何实现大文件分片上传、上传进度、终止上传以及删除服务器文件?
文件上传一般有两种方式:文件流上传和base64方式上传,毫无疑问,当进行大文件上传时候,转为base64是不现实的,因此用formData方式结合文件流,直接上传到服务器 本文主要结合vue的来讲解 ...
- Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素(转)
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个 ...
- js jquery获取当前元素的兄弟级 上一个 下一个元素
原博地址:http://www.jb51.net/article/71782.htm var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNod ...
- js jquery获取当前元素的兄弟级 上一个 下一个元素 jquery如何获取第一个或最后一个子元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
- jQuery 获取和设置radio 和 checkbox 值的操作
jquery 中的val(),可以取值也可赋值,表单元素中的radio和checkbox是比较常用的控件,下面说说对它们的取值和赋值的使用 1.取值 表单如下: <div class=" ...
- PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
- PHP利用Session实现上传进度
实现文件上传进度条基本是依靠JS插件或HTML5的File API来完成,其实PHP配合ajax也能实现此功能. PHP手册对于session上传进度是这么介绍的: 当 session.upload_ ...
随机推荐
- App的开发过程
不同的项目管理模式或许会有完全不同的流程步骤.但是专业性几乎是保证产品质量的唯一准则. App的开发过程主要分为以下阶段,本文会按顺序为大家简单地说明: 1.需求梳理.分析 2.产品原型图绘制 3.U ...
- 算法题 18 像素翻转 牛客网 CC150
算法题 18 像素翻转 牛客网 CC150_P114 题目描述 有一副由NxN矩阵表示的图像,这里每个像素用一个int表示,请编写一个算法,在不占用额外内存空间的情况下(即不使用缓存矩阵),将图像顺时 ...
- 剑指offer 面试35题
面试35题: 题目:复杂链表的复制 题:输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中 ...
- Spring笔记:AOP基础
Spring笔记:AOP基础 AOP 引入AOP 面向对象的开发过程中,我们对软件开发进行抽象.分割成各个模块或对象.例如,我们对API抽象成三个模块,Controller.Service.Comma ...
- ibatis工作原理
摘要: iBATIS 通过 SQL Map 将 Java 对象映射成 SQL 语句和将结果集再转化成 Java 对象,与其他 ORM 框架相比,既解决了 Java 对象与输入参数和结果集的映射,又能够 ...
- 运维角度浅谈MySQL数据库优化
一个成熟的数据库架构并不是一开始设计就具备高可用.高伸缩等特性的,它是随着用户量的增加,基础架构才逐渐完善.这篇博文主要谈MySQL数据库发展周期中所面临的问题及优化方案,暂且抛开前端应用不说,大致分 ...
- 转:Windows下USB接口驱动技术(二)
- mybatis中collection和association的作用以及用法
deptDaoMapper.xml 部门对应员工(1对多的关系) <resultMap type="com.hw.entity.Dept" id="deptinfo ...
- 【Head First Servlets and JSP】笔记6:什么是响应首部 & 快速搭建一个简单的测试环境
搭建简单的测试环境 什么是响应首部 最简单的响应首部——Content-Type 设置响应首部 请求重定向与响应首部 在浏览器中查看Response Headers 1.先快速搭建一个简单的测试环境, ...
- DNS 安装配置
DNS 安装配置 实验环境 一台主机:Linux Centos 6.5 32位 安装包: DNS服务:bind.i686 DNS测试工具:bind-utils DNS 服务安装 1.yum安装DNS服 ...