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() 上传文件和进度条显示的更多相关文章

  1. Extjs 使用fileupload插件上传文件 带进度条显示

    一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...

  2. layui上传文件配合进度条

    首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...

  3. asp.net mvc 实现上传文件带进度条

    本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...

  4. struts2上传文件添加进度条

    给文件上传添加进度条,整了两天终于成功了. 想要添加一个上传的进度条,通过分析,应该是需要不断的去访问服务器,询问上传文件的大小.通过已上传文件的大小, 和上传文件的总长度来评估上传的进度. 实现监听 ...

  5. vue项目上传文件以及进度条

    最近做项目的时候,需要上传自定义镜像.并且附带进度条,上网查询一下资料,经过一番折磨,也总算做出来了,把自己写项目的内容给大家分享一下. 先直接贴代码吧 1.首先声明一个formData对象. 2.把 ...

  6. XMLHttpRequest上传文件实现进度条

    话不多说,直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  7. FormData上传文件 带进度条

    * jQuery ajax  FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...

  8. ASP.NET Jquery+ajax上传文件(带进度条)

    效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...

  9. Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)

    先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 2019-03-26更新进度条显示体验 从服务器上压缩下载: 从 ...

随机推荐

  1. C#通过OLEDB导出大数据到Excel

    C#导出数据到Excel,基本有两种方法,一种方法是通过Microsoft.Office.Interop.Excel.Application,一行一列的写入Excel中:另一种方法是通过OLEDB,利 ...

  2. NSDateFormatter 问题

    NSDateFormatter *inputDateFormatter = [[NSDateFormatter alloc] init]; NSString *inputDateStr = @&quo ...

  3. 黑马程序猿_7K面试题之交通灯系统

    交通灯信号模拟系统 一.概述 模拟实现十字路口的交通灯管理系统逻辑,详细需求例如以下:(需求直接来源于老师的文档) ①      异步随机生成依照各个路线行驶的车辆. 比如: 由南向而来去往北向的车辆 ...

  4. JFinal之学习资源

    JFinal官网: http://www.jfinal.com/ JFinal在线API: http://tool.oschina.net/apidocs/apidoc?api=jfinal JFin ...

  5. Ubuntu下配置 keepalived+nginx+tomcat 负载均衡

    本文力图阐述在 Ubuntu Server 环境下使用 Keepalived + Nginx + Tomcat 搭建高可用负载均衡环境的操作步骤和简约配置,这里不涉及性能调优.先说一下他们各自扮演的角 ...

  6. Linux curl命令详解

    用途说明 curl命令是一个功能强大的网络工具,它能够通过http.ftp等方式下载文件,也能够上传文件.其实curl远不止前面所说的那些功能,大家可以通过man curl阅读手册页获取更多的信息.类 ...

  7. iOS开发——UI篇&提示效果

    提示效果 关于iOS开发提示效果是一个很常见的技术,比如我们平时点击一个按钮,实现回馈,或者发送网络请求的时候! 技术点: 一:View UIAlertView UIActionSheet 二:控制器 ...

  8. (转)如何在JavaScript与ActiveX之间传递数据3

    本文研究如何在JS等脚本语言与ActiveX控件之间通信,如何传递各种类型的参数,以及COM的IDispatch接口.使用类似的方法,可以推广到其他所有脚本型语言,如LUA,AutoCad等.本文将研 ...

  9. JavaScript标准Selection操作

    简介 术语 属性 方法 document.activeElement document.designMode = 'on'; 简介 selection是对当前激活选中区(即高亮文本)进行操作. 在非I ...

  10. window.top、window.parent

    iframe和frameset中可能会用到window.parent.window.top 其中window.parent是相对于打开子页面的当前js所在页面的层级: 例如:a页面中包含一个ifram ...