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更新进度条显示体验 从服务器上压缩下载: 从 ...
随机推荐
- 淘宝IP地址查询
官方网址:http://ip.taobao.com/index.php 相关文章: http://www.cnblogs.com/zetee/p/3482085.html http://www.cnb ...
- SmoothProgressBar
https://github.com/castorflex/SmoothProgressBar
- eclipse代码提示框背景色改动
因为个人习惯,喜欢把eclipse的文本编辑框背景调成全黑色,可是代码提示框的默认背景色也是黑色.所以两者就冲突了.导致看不到代码提示框的内容. 后来发现代码提示框的背景色能够改动.改动内容例如以下: ...
- [Effective C++ --019]设计class犹如设计type
前言 我们在编写程序的时候,无论哪一种语言,总是会告诉你这种语言应该有的类型.我们将它们直接拿来使用,可是从来没有考虑过这些类到底是怎么设计出来的! 所幸的是:在OOP中,每当我们定义一个新的clas ...
- 隐式Intent实例
注意:The <strong>categories</strong>, if supplied, must <em>all</em> be listed ...
- 文件夹添加右键DOS快捷入口
1.自带的方法 win7: 按住shift键然后右键点击文件夹,菜单里会出现“在此处打开命令窗口”一项,其实就相当于在当前位置打开Dos窗口,这个是系统自带的. winxp: 打开“我的电脑”,点击菜 ...
- python--列表的使用
1.定义列表: names = ['Mo',"Tenglan",'Eric'] 通过下标访问列表中的元素,下标从0开始计数 >>> names[0] 'Mo' & ...
- javascript笔记01:javascript入门介绍
javascript是实现网页动态效果的基石,在web开发中扮演重要的角色,被广泛应用的各个领域 (1)网页游戏 (2)地图搜索 (3)股市信息查询 (4)web聊天 …………
- Android_AsyncTask_json
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...
- Flash cs6 帧上的菱形原来是关键帧
假如需要删除这个关键帧,选中它,然后右键,"清除关键帧",相应的类型即可. 因为之前学了一点点Flash,没见过帧上面这个菱形图标,才知道是关键帧.