Progress
这个标签用来表示进度,常用来表示下载的进度。
<progress value="22" max="100"></progress>
默认的样式就是这样,这个样式是可以修改的。
value:当前值
max:最大值
当前值/最大值=当前的比例(就是进度了)
一个上传显示进度的小案例: 我这里用的是表单的异步上传 文件上传---利用表单提交
#myProgress
{
background: ghostwhite;
width: 200px;
height: 30px;
-webkit-appearance: none;
}
::-ms-fill //针对不同的浏览器做的处理
{
background: dodgerblue;
}
::-moz-progress-bar
{
background: dodgerblue;
}
::-webkit-progress-bar //全部的(整个进度条)
{
background: ghostwhite;
}
::-webkit-progress-value //已完成的样式
{
background: dodgerblue;
}
HTML:
JS: 一些参数的解释在上面说的那篇文章里面有解释。
$("#myform").ajaxSubmit({
beforeSubmit: function (formData, jqForm, options) { //开始之前
$("#myProgress").show();
$("#per").show();
}, uploadProgress: function (event, position, total, percentComplete) { //显示进度的
$("#myProgress").val(percentComplete);
$("#per").text(percentComplete + "%");
},
success: function (data) {
$("#myProgress").hide();
$("#per").hide();
},
error: function (data, status, e) {
$("#myProgress").hide();
$("#per").hide();
NewAlertBox('ERROR', '上传失败!', 2000);
},
url: "/tool/upload_ajax.ashx",
type: "post",
dataType: "json",
timeout: 60000
});
效果:(这是我上传的过程中截的图)
Progress的更多相关文章
- HTML5 progress和meter控件
在HTML5中,新增了progress和meter控件.progress控件为进度条控件,可表示任务的进度,如Windows系统中软件的安装.文件的复制等场景的进度.meter控件为计量条控件,表示某 ...
- 登陆Oracle,报oracle initializationg or shutdown in progress 错误提示
前两天,登陆Oracle,发现登陆不上去了,报”oracle initializationg or shutdown in progress 错误提示” 错误. 然后就想着怎么去解决,首先自己到win ...
- The replication agent has not logged a progress message in 10 minutes.
打开Replication Monitor,在Subscription Watch List Tab中,发现有大量的status= “Performance critical” 的黄色Warning, ...
- JavaScript----Js操控-HTML5 <progress> 标签
Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...
- SharePoint Configuration Wizard - Unable to upgrade SharePoint Products and Technologies because an upgrade is already in progress
故障描述 当要运行SharePonit Products and Technologies Configuration Wizard的时候,出现了如下图所示的错误提示. 错误信息为: Unable t ...
- No edit session in the progress
运行环境:开发环境:Windows7旗舰版64bit.VisualStudio2008 With SP1.ArcEngine10.0.NetFrameWork4.0.IIS7和C#开发语言. 问题描述 ...
- “ORA-01033:ORACLE initialization or shutdown in progress”错误的解决
网页上显示以下错误信息: ORA-:ORACLE initialization or shutdown in progress 启动oracle数据库,有以下提示信息 Database mounted ...
- IOS 公共类-MyMBProgressUtil Progress显示
IOS 公共类-MyMBProgressUtil Progress显示 此公共类用于显示提示框,对MBProgress的进一步封装.可以看下面的代码 接口: @interface MyMBProgre ...
- exception throw in progress runner thread_VS2015中SVN源代码无说明提交异常
1-问题描述:通过SVN将代码变更提交服务器时,你可能会遇到以下异常: exception throw in progress runner thread 2-解决办法: SVN代码源代码管理和TF ...
- Progress.js – 为页面上的任意对象创建进度条效果
Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...
随机推荐
- mogondb简介
MongoDB是一款强大.灵活,且易扩展的通用型数据库,其包含以下设计特点 1.1易于使用 与关系型数据库不同的是,它没有table/rows/records,相反采用更为灵活的文档(document ...
- Spring课程 Spring入门篇 5-1 aop基本概念及特点
概念: 1 什么是aop及实现方式 2 aop的基本概念 3 spring中的aop 1 什么是aop及实现方式 1.1 aop,面向切面编程,比如:唐僧取经需要经过81难,多一难少一难都不行.孙悟空 ...
- 【linux学习笔记】began,每次玩这个都特别着迷
胡乱的安装,通过虚拟机,从DVD加载开始,当然网上有大段的装机教程,装了两个Linux发行版,一个是centos7,一个是ubuntu18.04. 分区那些事: 因为处于学习阶段,所以总是因为分区问题 ...
- JavaScript中文拼音排序函数
要对很多设备根据名称排序,找了找没有找到特别适合的,然后就自己写了一个根据中文拼音首字母排序的方法. github: https://github.com/haboll/sort.git
- javascript对象(2)
这个对象,不是那个对象.续更第二篇.. 昨天说了对象的基本概念以及创建,今天来说一下它的其他方法: 1.访问属性的两种方式:点语法.[]语法 var dog =new Object(); dog.na ...
- Java JSONArray的封装与解析
package com.kigang.test; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import java.ut ...
- apk接入google play邮箱登陆及充值注意事项
unity3d 接入google play商店相关sdk,相关要求A.环境配置: 1.手机安装谷歌安装器 2.使用谷歌安装器安装Google 服务框架.Google Play服务.Google Pla ...
- Automapper 实现自动映射
出于安全考虑,在后台与前台进行数据传输时,往往不会直接传输实体模型,而是使用Dto(Data transfer object 数据传输对象),这样在后台往前台传递数据时可以省略不必要的信息,只保留必要 ...
- wxpython 界面布局
1.frame.Centre() 窗口出来后显示居中 2.textCtrl文本框style=wx.TE_PASSWORD密码, wx.TE_MULTILINE多行输入 3.单选按钮组 4.列表 5.图 ...
- python str、int、dict
一.str print(dir(int))#['__add__', '__class__', '__contains__', '__delattr__', '__dir__', '__doc__', ...