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

时间：2021-05-26

本文实例讲述了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实现文件上传进度条，能显示上传的百分比等信息，内容就到这里了，希望大家能够喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章