jQuery实现简单的文件上传进度条效果
2015-11-20 14:38
1936 查看
具体代码如下:
<!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实现文件上传进度条,能显示上传的百分比等信息,内容就到这里了,希望大家能够喜欢。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法