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_ ...
随机推荐
- Linux中权限管理之ACL权限
1.简介: a.作用: 是为了防止权限不够用的情况,一般的权限有所有者.所属组.其他人这三种,当这三种满足不了我们的需求的时候就可以使用ACL权限 b.故事背景: 一个老师,给一个班的学员上课,他在l ...
- Android学习资源网站大全
https://github.com/zhujun2730/Android-Learning-Resources 整理了一些 Android 的博客链接.学习资源网站.站在巨人的肩膀上,会看得更远.整 ...
- Java基础—复用类
复用代码是Java众多引人注目的功能之一. 一般而言,实现代码重用java提供了两种方式:组合以及继承. 组合:新的类由现有类的对象所组成.(复用现有代码的功能,而非它的形式) 继承:按照现有类的类型 ...
- Java - 在控制台中执行一个可执行jar
1.Maven打包一个可执行jar: <build> <plugins> <plugin> <groupId>org.apache.maven.plug ...
- 解决远程桌面关闭后teamviewer不能连接的问题
使用windows远程桌面连接远程电脑,在关闭远程桌面后,windows系统会锁定,此时再用teamviewer连接会出现“无法捕捉画面”或者“拒绝连接”的问题. 解决办法:设置要连接的远程电脑上的t ...
- Service Fusing
服务熔断也称服务隔离,来自于Michael Nygard 的<Release It>中的CircuitBreaker应用模式,Martin Fowler在博文CircuitBreaker中 ...
- linux 定时任务未执行php脚本
1,对于无法执行php文件,首先你应该考虑的问题是是否php代码有错误,你可以先检查一下你的php代码,或者可以在linux上面执行一下这个文件,看是否能够执行成功:如果成功了,就说明是crontab ...
- HTTP学习笔记02-HTTP报文格式之概述
HTTP学习笔记02-HTTP报文格式之概述 HTTP学习笔记02-HTTP报文格式之概述 HTTP报文格式 报文的语法 起始行 首部 实体部分 学习一个协议感觉最有意思的就是看包结构…在我看来这是唯 ...
- vi高级命令集锦
.交换两个字符位置 xp .上下两行调换 ddp .把文件内容反转 :g/^/m0/ (未通过) .上下两行合并 J .删除所有行 dG .从当前位置删除到行尾 d$ .从当前位置复制到行尾 y$ 如 ...
- Ubuntu16.04下编译android6.0源码
http://blog.csdn.net/cnliwy/article/details/52189349 作为一名合格的android开发人员,怎么能不会编译android源码呢!一定要来一次说编译就 ...