jQuery实现简单的文件上传进度条效果


Posted in Javascript onMarch 26, 2020

本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下:

运行效果截图如下:

jQuery实现简单的文件上传进度条效果

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>upload</title>
<link rel="stylesheet" type="text/css" href="upload/upload.css">
<script type="text/javascript" src="upload/jquery.js"></script>
</head>
<body>
<span class="upload-span">开始上传文件</span>
<div class="upload-mask"></div>
<div class="upload-component">
<div class="upload-close">
<span class="upload-close-span">关闭</span>
</div>
<div class="upload-content">
<div class="progress">
<span class="upload-text"></span>
<span class="uploaded"></span>
</div>
<div class="confirm-cancel">
<span class="confirm">确认</span>
<span class="cancel">取消</span>
</div>
</div>
</div>
<script type="text/javascript" src="upload/upload.js"></script>
</body>
</html>

CSS代码:

.upload-span{
display:inline-block;
width:120px;
height:40px;
color:#FFFFFF;
text-align: center;
line-height:40px;
background-color: blue;
border:2px solid blue;
border-radius:5px;
cursor: pointer;
letter-spacing:2px;
}
.upload-mask{
position: absolute;
top:0;
left:0;
z-index:9;
width:100%;
height:100%;
background-color: rgba(84,84,84,0.3);
display: none;
}
.upload-component{
position: absolute;
z-index:99;
top:50%;
left:50%;
margin-left:-120px;
margin-top:-60px;
width:240px;
height:120px;
background-color:#FFFFFF;
display:none;
}
.upload-close{
position: relative;
height:30px;
background-color: rgb(234,234,234);
}
.upload-close span{
position: absolute;
right:15px;
line-height:30px;
cursor: pointer;
}
.upload-content,.confirm-cancel{
margin-top:15px;
}
.progress{
position:relative;
width:90%;
height:22px;
margin-left:4.88888%;
text-align: center;
line-height:22px;
border:1px solid #ccc;
}
.upload-text{
position:absolute;
z-index:99999;
color:red;
}
.uploaded{
position:absolute;
left:0;
z-index:9999;
width:0%;
height:100%;
background-color: blue;
color:#FFFFFF;
}
.confirm-cancel span{
display:inline-block;
width:60px;
height:30px;
line-height:30px;
text-align: center;
background-color:#ccc;
cursor:wait;
}
.confirm{
margin-left:40%;
}
.cancel{
margin-left:10px;
}

jQuery代码:

$(function (){
var $uploadSpan = $('.upload-span');
var $uploadMask = $('.upload-mask');
var $uploadContent = $('.upload-component');
var $closeConfirmCancel = $('.upload-close-span,.confirm,.cancel');
var $uploadTextSpan = $('.upload-text');
function showMask(){
$(".upload-mask,.upload-component").css({display:'block'});
progressBar();
$uploadSpan.off('click',showMask);
}
function hiddenMask(){
$uploadMask.css({display:'none'});
$uploadSpan.on('click',showMask);
}
function closeConfirmCancel(){
$uploadContent.css({display:'none'});
$uploadTextSpan.text('').next().css({width:0});
hiddenMask();
}
// 模拟进度
function progressBar(){
var max =100;
var init =0;
var uploaded;
var test = setInterval(function(){
init +=5;
uploaded = parseInt(init / max *100)+'%';
$uploadTextSpan.text(uploaded).next().css({width:uploaded});
if(init ===100){
clearInterval(test);
$uploadTextSpan.text('上传完成');
$('.confirm-cancel span').css({cursor:'pointer'});
$('.confirm').css({backgroundColor:'rgb(111,197,293)'});
$('.cancel').css({backgroundColor:'rgb(175,194,211)'})
$closeConfirmCancel.on('click',closeConfirmCancel);
}
else{
$closeConfirmCancel.off('click',closeConfirmCancel);
$('.upload-close-span').on('click',function(){
clearInterval(test);
closeConfirmCancel();
});
}
},1000);
}
$uploadSpan.on('click',showMask);
})

JQuery实现文件上传进度条,能显示上传的百分比等信息,内容就到这里了,希望大家能够喜欢。

Javascript 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jquery实现手风琴效果
Nov 20 #Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 #Javascript
jquery背景跟随鼠标滑动导航
Nov 20 #Javascript
JavaScript获取浏览器信息的方法
Nov 20 #Javascript
JavaScript性能优化之小知识总结
Nov 20 #Javascript
Bootstrap每天必学之基础排版
Nov 20 #Javascript
详解JavaScript的回调函数
Nov 20 #Javascript
You might like
php实现ping
2006/10/09 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
浅谈js的异步执行
2016/10/18 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Python使用folium excel绘制point
2019/01/03 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
Python 复平面绘图实例
2019/11/21 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
授权委托书样本
2014/04/03 职场文书
撤诉书怎么写
2015/05/19 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
Python中的tkinter库简单案例详解
2022/01/22 Python