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 ...
随机推荐
- pat1012. The Best Rank (25)
1012. The Best Rank (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue To eval ...
- Linux kernel workqueue机制分析
Linux kernel workqueue机制分析 在内核编程中,workqueue机制是最常用的异步处理方式.本文主要基于linux kernel 3.10.108的workqueue文档分析其基 ...
- 深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
前言 Bob大叔提出并发扬了S.O.L.I.D五大原则,用来更好地进行面向对象编程,五大原则分别是: The Single Responsibility Principle(单一职责SRP) The ...
- SpringSecurity 3.2入门(4)登录密码加密
密码admin 进行MD5 32位加密为21232F297A57A5A743894A0E4A801FC3 增加spring-security.xml文件配置如下 <!-- 认证管理器,配置Spr ...
- 关于“System.Data.ProviderIncompatibleException”类型的异常
作为刚学习MVC的菜鸟,因为平常的不努力学习.看书,所以只能参考官方的教程学习操作新手入门 一步一步认真的做,前天晚上出现了一个关于数据库连接字符串错误的问题,自己查了很多资料, 问了许多大神,他们的 ...
- 调试.NET程序OutOfMemoryException (转载)
原文地址:http://blog.csdn.net/directionofear/article/details/8009427 应用程序调试,需要有个常规的调试思路,应对各类问题最基本的调试手段是什 ...
- String方法使用示例
import java.lang.String; public class StringMethodDemo1{ /** 熟悉String的常用方法. */ public static void ma ...
- 【Spring Cloud】与Spring Boot版本匹配关系
Spring Cloud版本演进情况如下: 版本名称 版本Finchley snapshot版Edgware snapshot版Dalston SR1 当前最新稳定版本Camden SR7 稳定版本B ...
- Android开发之EditText利用键盘跳转到下一个输入框
以前做项目的时候,从来没考虑过这些.这段时间公司内部用的一款APP,就出现了这个问题,在登录或者注册的时候,点击键盘的回车按钮,可以跳到下一个输入框的功能,这个属性一直也没记住,今天就把自己一直没记过 ...
- Vue2.0+Node.js+MongoDB全栈打造商城系统
vue.js +axios mock数据 在main.js中 import axios from 'axios' Vue.prototype.$ajax = axios webpack.dev.con ...