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;
}
})
ajax实现一个前台的进度条,前台ajax实现上传文件并且有进度条相关推荐
- php flash上传进度条,PHP_PHP+FLASH实现上传文件进度条相关文件 下载,PHP之所以很难实现上传进度条 - phpStudy...
PHP+FLASH实现上传文件进度条相关文件 下载 PHP之所以很难实现上传进度条是因为在我们上传文件到服务器的时候,要等到文件全部送到服务器之后,才执行相应的php文件.在这之前,文件数据保存在一个 ...
- JavaWeb 使用ajax上传文件并显示进度条等上传信息
文件上传在Web程序中是常用的功能,一般上传图片或者文件大小比较少的文件客户端不需要显示上传进度或文件上传的信息,如果是上传的文件比较大的时候,可以在客户端展示文件上传进度以及根据业务的需求显示文件上 ...
- 使用jquery.fileupload.js上传文件时添加进度条
1.首先页面用来展示上传按钮 和 显示进度条的 <tr><td style="width:140px;text-align: right;padding-top: 13px ...
- EXTJS+ASP.NET上传文件带实时进度条代码
一,文件夹 二,upLoad.cs是继承IHttpModule的类: usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usin ...
- java 上传 进度条_Ajax上传文件并显示进度条
第四步:编写前端代码. 1.路径在 当前项目的:src\main\resources\asyn.html 上传进度条 align="center"> 0% bordercol ...
- php获取文件上传进度,PHP使用APC获取上传文件进度
今天发现使用PHP的APC也能获取上传文件的进度.这篇文章就说下如何做. 安装APC 首先安装APC的方法和其他PHP模块的方法没什么两样,网上能找出好多 phpinfo可以看到APC的默认配置有: ...
- Ajax上传文件并显示进度条
举例说明 (主要用到$.ajax的xhr参数执行回调) xhr 用于创建 XMLHttpRequest 对象的函数. 前端框架:jQuery+Bootstrap+Layer HTML页面里的表单: & ...
- linux上tftp上传文件失败,Linux下tftp上传文件失败的几条原因
1. Error code 0: Permission denied 主目录没有写权限, 可以 chmod 0777 /var/lib/tftpboot 2.Error code 1: File ...
- flask ajax 上传 图片,flask jQuery ajax 上传文件
1.html 代码 注:1.html 部分主要是一个form表单,其中表单的enctype = "multipart/form-data" 必须要有. 2.由于我的页面背景颜色设置 ...
最新文章
- 链表中删除选定结点的优雅操作!
- Android自动化测试探索
- Apache2 httpd.conf中文版
- json数据格式在javascript的读取与c#后台的赋值格式
- PostgreSQL rocks, except when it blocks: Understanding locks
- 强大的Common类库
- Tensorflow笔记:搭建神经网络
- STM32 - Cube介绍
- 基于WebSocket的web聊天室
- 滤镜之瓷砖TileReflect
- 腾讯会议共享PPT使用演讲者模式
- 解决谷歌浏览器 Google Chrome不能拖拽安装离线插件的办法
- 【Java】# Java对图片进行base64编解码
- (计算机组成原理)第三章存储系统-第六节2:页式/段式虚拟存储器
- 华为电脑Linux进pe,华为笔记本(HuaWei)如何进入BIOS设置U盘启动?
- Android Studio中Intent的用法3-2
- Mac解压rar文件工具
- C++的模糊查找的实现(简版)
- 如何用光盘映像文件重装服务器系统,光盘映像文件如何装系统_通过光盘映像文件装系统的方法...
- 解一元一次方程计算机在线,解一元一次方程(一).doc
热门文章
- jQuery源码研究01
- 【数据结构基础】-串-顺序结构的基本操作实现
- 常染色体的隐性疾病数学建模(代数模型)
- 金叉成功率_一个非常强烈的买卖信号:三金叉见顶,三死叉见底,短短10字,但是成功率却远超“金叉买,死叉卖”...
- 1660用哪个驱动稳定_PDF转word怎么转?哪个PDF转换器最好用?-PDF ——快科技(驱动之家旗下媒体)-...
- android设置大小能用小数,Android中关于保留小数点位数的处理
- double类型占几个字节_MongoDB 中的数据类型
- numpy基础知识点
- Java加密与解密的艺术~RSA模型分析
- mysql中when用法_Mysql 中的CASE WHEN 用法