ajaxSubmit() 上传文件和进度条显示
1. 首先引用js文件
<script type="text/javascript" src="/js/jquery/jquery.form.js"></script> //ajaxForm 依赖脚本
<script type="text/javascript" src="/js/jquery/jquery-1.8.0.min.js"></script>
2. form 表单
//这是进度条的显示位置
<div class="progress" id="progressHide">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 0%;" id="progressBar">
<span class="sr-only">40% 完成</span>
</div>
</div>
//这是form表单
<form class="form-horizontal" id="uploadTaskForm" action="uploadTask" enctype="multipart/form-data" method="post"> <input type="file" name="taskFile" class="form-control" id="taskFile"/> <button type="button" class="btn btn-default" onclick="saveTask()">上传 </button> </form>
3. ajax提交
function saveTask() {
var options = {
//提交表单之前做的验证
beforeSubmit:function(){
var taskFile = $("#taskFile").val();
if(taskFile==null || taskFile==''){
return false //表示不可以提交表单
}else{
return true //可以提交表单
} },
//服务器返回结果处理
success:function(data){
//......
},
//进度条的监听器
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
} } //提交表单(uploadTaskForm --->表单的ID)
$("#uploadTaskForm").ajaxSubmit(options); return false //阻止页面跳转 }
4. 侦查当前文件上传情况
function onprogress(evt){
//侦查附件上传情况
//通过事件对象侦查
//该匿名函数表达式大概0.05-0.1秒执行一次
// console.log(evt.loaded); //已经上传大小情况
//evt.total; 附件总大小
var loaded = evt.loaded;
var tot = evt.total;
var per = Math.floor(100*loaded/tot); //已经上传的百分比
var son = document.getElementById('progressBar');
son.innerHTML = per+"%";
son.style.width=per+"%";
}
---------------------------------------------------------------------阿纪----------------------------------------------------------------------
ajaxSubmit() 上传文件和进度条显示的更多相关文章
- Extjs 使用fileupload插件上传文件 带进度条显示
一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...
- layui上传文件配合进度条
首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...
- asp.net mvc 实现上传文件带进度条
本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...
- struts2上传文件添加进度条
给文件上传添加进度条,整了两天终于成功了. 想要添加一个上传的进度条,通过分析,应该是需要不断的去访问服务器,询问上传文件的大小.通过已上传文件的大小, 和上传文件的总长度来评估上传的进度. 实现监听 ...
- vue项目上传文件以及进度条
最近做项目的时候,需要上传自定义镜像.并且附带进度条,上网查询一下资料,经过一番折磨,也总算做出来了,把自己写项目的内容给大家分享一下. 先直接贴代码吧 1.首先声明一个formData对象. 2.把 ...
- XMLHttpRequest上传文件实现进度条
话不多说,直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- FormData上传文件 带进度条
* jQuery ajax FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...
- ASP.NET Jquery+ajax上传文件(带进度条)
效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...
- Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)
先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 2019-03-26更新进度条显示体验 从服务器上压缩下载: 从 ...
随机推荐
- C#通过OLEDB导出大数据到Excel
C#导出数据到Excel,基本有两种方法,一种方法是通过Microsoft.Office.Interop.Excel.Application,一行一列的写入Excel中:另一种方法是通过OLEDB,利 ...
- NSDateFormatter 问题
NSDateFormatter *inputDateFormatter = [[NSDateFormatter alloc] init]; NSString *inputDateStr = @&quo ...
- 黑马程序猿_7K面试题之交通灯系统
交通灯信号模拟系统 一.概述 模拟实现十字路口的交通灯管理系统逻辑,详细需求例如以下:(需求直接来源于老师的文档) ① 异步随机生成依照各个路线行驶的车辆. 比如: 由南向而来去往北向的车辆 ...
- JFinal之学习资源
JFinal官网: http://www.jfinal.com/ JFinal在线API: http://tool.oschina.net/apidocs/apidoc?api=jfinal JFin ...
- Ubuntu下配置 keepalived+nginx+tomcat 负载均衡
本文力图阐述在 Ubuntu Server 环境下使用 Keepalived + Nginx + Tomcat 搭建高可用负载均衡环境的操作步骤和简约配置,这里不涉及性能调优.先说一下他们各自扮演的角 ...
- Linux curl命令详解
用途说明 curl命令是一个功能强大的网络工具,它能够通过http.ftp等方式下载文件,也能够上传文件.其实curl远不止前面所说的那些功能,大家可以通过man curl阅读手册页获取更多的信息.类 ...
- iOS开发——UI篇&提示效果
提示效果 关于iOS开发提示效果是一个很常见的技术,比如我们平时点击一个按钮,实现回馈,或者发送网络请求的时候! 技术点: 一:View UIAlertView UIActionSheet 二:控制器 ...
- (转)如何在JavaScript与ActiveX之间传递数据3
本文研究如何在JS等脚本语言与ActiveX控件之间通信,如何传递各种类型的参数,以及COM的IDispatch接口.使用类似的方法,可以推广到其他所有脚本型语言,如LUA,AutoCad等.本文将研 ...
- JavaScript标准Selection操作
简介 术语 属性 方法 document.activeElement document.designMode = 'on'; 简介 selection是对当前激活选中区(即高亮文本)进行操作. 在非I ...
- window.top、window.parent
iframe和frameset中可能会用到window.parent.window.top 其中window.parent是相对于打开子页面的当前js所在页面的层级: 例如:a页面中包含一个ifram ...