ajax实现一个前台的进度条,前台ajax实现上传文件并且有进度条

// ajax + jQuery上传

function UploadFile() {

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;

}

}

//获取文件

var file = $("#doc-form-file")[0].files[0];

var whether = $("#whether").val();

var form = new FormData();

form.append('file', file);

form.append('whether', whether);

// form.append("csrfmiddlewaretoken", '{{ csrf_token }}');

$.ajax({

type: 'POST',

url: '{:url("/web/save/upload")}',

data: form,

dataType: 'json',

processData: false, // 告诉jquery不转换数据

contentType: false, // 告诉jquery不设置内容格式

xhr: xhrOnProgress(function(e) {

var percent = e.loaded / e.total;

$("#progress").css("width", (percent * 100) + '%');

$('#progress').html(Math.round((percent * 100)) + '%');

if( percent == 1){

setTimeout(function() {

$("#show-progress").modal('close');

}, 1000);

}

}),

success: function(data) {

var json = JSON.parse(data);

switch (json['code']) {

case 200:

$.DialogByZ.Autofade({

Content: json['msg']

});

setTimeout(function() {

location.href = '{:url("/web/save/tables")}';

}, 2000);

break;

case 300:

$.DialogByZ.Autofade({

Content: json['msg']

});

setTimeout(function() {

location.href = '{:url("/web/save/index")}';

}, 2000);

break;

case 301:

$.DialogByZ.Autofade({

Content: json['msg']

});

setTimeout(function() {

location.href = '{:url("/web/save/index")}';

}, 2000);

break;

case 302:

$.DialogByZ.Autofade({

Content: json['msg']

});

setTimeout(function() {

location.href = '{:url("/web/save/index")}';

}, 2000);

break;

case 304:

$.DialogByZ.Autofade({

Content: json['msg']

});

setTimeout(function() {

location.href = '{:url("/web/save/index")}';

}, 2000);

break;

case 305:

$.DialogByZ.Autofade({

Content: json['msg']

});

setTimeout(function() {

location.href = '{:url("/web/goods/goodslist")}';

}, 2000);

break;

case 306:

$.DialogByZ.Autofade({

Content: json['msg']

});

setTimeout(function() {

location.href = '{:url("/web/save/index")}';

}, 2000);

break;

}

// console.log(arg);

},

error: function() {

$.DialogByZ.Autofade({

Content: "网络错误,请稍后重试!"

});

setTimeout(function() {

location.href = '{:url("/web/save/index")}';

},2000)

return;

}

})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/502655.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蒙特卡洛分析_随机模拟:马尔科夫链蒙特卡洛采样MCMC与EM算法「2.3」

最近学习了机器学习中的马尔科夫链蒙特卡洛(Markov Chain Monte Carlo, 简称MCMC) 相关的知识。主要内容包括:【1】蒙特卡洛原则,及其应用于采样的必要性(已经发布在头条)【2】用于求解最大似然、近似推断、期望问题的经典采样算法:Metropoli…

三维错切变换矩阵_图像的仿射变换

目录:概述图像基本变换仿射变换原理python实现一、概述图像的几何变换主要包括:平移、缩放、旋转、仿射、透视等等。图像变换是建立在矩阵运算基础上的,通过矩阵运算可以很快的找到不同图像的对应关系。理解变换的原理需要理解变换的构造方法…

app系统服务器出错怎么回事,app连接服务器出错

app连接服务器出错 内容精选换一换接口调用出错将无法获取建立相应隧道连接的必要信息,将无法正常建连云手机设备实例,具体报错示例如下:首先,尝试使用adb connect重新建立连接,依旧报错可通过查看安装目录下的日志adb…

js foreach 跳出循环_VUE.js

Vue.js模板语法vue.js使用了基于HTML的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据,其核心就是一个允许开发者采用简洁的模板语法来将数据渲染进DOM系统。使用各种组件来做成一个项目的话,需要结合单页应用。插值数据绑定最…

2异常处理_异常是什么?什么是常用类?

第一节 异常1. 异常的概念​ 异常(Exception) 即例外,程序没有按自己预想的结果运行出来,出现了非正常情况,即“程序得病了”。怎么让我们写的程序做出合理的处理,不至于崩溃是我们关注的核心。 异常机制就是当程序出现错误&#…

origin三元相图_扩增子图表解读7三元图:三组差异数量和关系

点击上方蓝色「宏基因组」关注我们!专业干货每日推送!背景介绍(Introduction)宏基因组学宏基因组学目前的主要研究方法包括:16S/ITS/18S扩增子、宏基因组、宏转录组和代谢组,其中以扩增子研究最为广泛。目的意义本系列文章将带领大…

写出python字符串三种常用的函数或方法_python中几种常用字符串函数

1、lower()把所有字符换成小写 2、upper()把所有字符换成大写 3、swapcase()大小写互换 4、title()把每个单词首字母大写,他是以所有英文字母的字符来区别是否为一个单词的,eg:s "a是傻b" s2 s.title() 结果为"A傻B",a和b都变成了大写,因为他是根据英文字…

python app开发模块_Python pytkapp包_程序模块 - PyPI - Python中文网

用于开发应用程序的python包 多文档/单文档界面 利用tkinter库和附加tkinter集 小部件。 查看可用演示: pytkapp/demo/run_ptapoptionsdemo.py-为选项的容器运行gui demo(可用的小部件、规则) pytkapp/demo/run_ptamdidemo.py-运行MDI应用程序…

搭建python_Crawlab准备之python+scrapy环境搭建

阅读文本大概需要3分钟。上篇《分布式爬虫管理平台Crawlab开发搭建》把爬虫的管理后台搭建起来了;捣鼓一番发现要真正爬取数据还有下不少的功夫。这篇看看怎么搭建pythonscrapy环境。0x01:安装Python3下载python安装包,具体版本根据自己的系统…

64测试cpu稳定性_SuperPI-圆周率计算与CPU性能与稳定性测试

Super PI是由东京大学Kanada lab出品的一款专用于检测CPU稳定性的软件,目前最新版本是1.9版,更新于2013年了。Super PI软件通过计算预定的圆周率让CPU高负荷运作,从而达到考验CPU计算的能力与稳定的作用。同时也能计算出圆周率来保存到文本文…

python对比两个文件找出不同并显示_python difflib模块实现两个文件差异对比,并输出html格式。...

difflib 模块包含一些用来计算和处理序列之间差异的工具。它对于比较文本尤其有用,其中包含的函数可以使用多种常用差异格式生成报告。 实现了三个类: SequenceMatcher 任意类型序列的比较 (可以比较字符串) Differ 对字符串进行比较 HtmlDiff 将比较结果…

传值类型_java中的“传值”与“传址”问题

“用对象来生成对象”“对象作为参数进行传递”“构造方法中的参数为对象”问题本质上是“传值”与“传址”的问题先说结论:1、基本类型(包括String类)作为参数传递时,是传递值的拷贝,无论你怎么改变这个拷贝&#xff…

python可以处理wps吗_基于python的docx模块处理word和WPS的docx格式文件方式

基于python的docx模块处理word和WPS的docx格式文件方式 发布时间:2020-08-23 05:37:05 来源:脚本之家 阅读:109 Python docx module for Word or WPS processing 本文是通过docx把word中的表格中的某些已填好的内容提取出来,存入e…

两个苹果手机如何同步数据_同步苹果手机和Windows的提醒事项

作为一个学生党,能买得起苹果手机已经是一件很幸福的事情了,拥有苹果电脑只是一个美好的愿望,所以现在常见的搭配就是苹果手机加Window电脑,这样就有一个问题,就是苹果手机和Windows电脑的提醒事项没有办法同步&#x…

低通滤波器算法实现_控制算法手记自抗扰控制的几点思考

写在前面在谈自己的一些思考之前,放上一本简明的教材(只有133页),对自抗扰控制ADRC (Active disturbance rejection control)的起源、基本思路、结构、发展及应用做了阐述,是很好的入门读物。图1. 自抗扰控制入门书籍如果要达到弄懂&#xff…

添加日志_第五章springboot2.0添加aop日志实现记录请求地址

1. 添加spring-boot-starter-aop包<dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-aopartifactId><version>2.0.0.RELEASEversion>dependency>2. 新建WebLogAspect类3. 添加Aspect Component注解…

本机连接opc server有部分数据不刷新_实时数据库PI在企业MES系统中的应用

实时数据库是计算机控制系统和上层生产管理系统数据存储和展示的核心。结合河南天冠燃料乙醇有限公司MES系统应用实例&#xff0c;介绍了实时数据库PI的安装部署&#xff0c;建立信号量集和数据导入&#xff0c;以及客户端接口配置&#xff0c;数据库测试等相关主题。通过基于P…

pythonlistsort函数_python用List的内建函数list.sort进行排序

对List进行排序&#xff0c;Python提供了两个方法方法1.用List的内建函数list.sort进行排序list.sort(funcNone, keyNone, reverseFalse)Python实例&#xff1a;方法2.用序列类型函数sorted(list)进行排序(从2.4开始)Python实例&#xff1a;两种方法的区别&#xff1a;sorted(l…

java 数组赋值_自学JAVA每日记录(10)-欢迎指点欢迎共勉

接上一篇编程练习&#xff1a;编写一个JAVA程序&#xff0c;创建指定长度的 int 型数组&#xff0c;并生成 100 以内随机数为数组中的每个元素赋值&#xff0c;然后输出数组要求&#xff1a;1、 要求通过定义带参带返回值的方法来实现2、 通过参数传入数组的长度&#xff08;例…

agv系统介绍_AGV地面控制系统介绍

AGV控制系统分为地面(上位)控制系统、车载(单机)控制系统及导航/导引系统&#xff0c;其中&#xff0c;地面控制系统指AGV系统的固定设备&#xff0c;主要负责任务分配&#xff0c;车辆调度&#xff0c;路径(线)管理&#xff0c;交通管理&#xff0c;自动充电等功能&#xff1b…