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

本文介绍了jQuery实现文件上传进度条的代码，供大家参考：

运行效果的截图如下：
具体代码如下：

上传

开始上传文件
关闭

确认
取消
CSS代码：

上传跨度{
显示：内联块；
宽度：120px；
身高：40px；
颜色：# ffffff；
文本对齐：中心；
行高：40px；
背景颜色：蓝色；
边境：2px固蓝；
边界半径：5px；
光标：指针；
字母间距：2px；
}
上传掩码{
位置：绝对；
顶部：0；
左：0；
Z指数：9；
宽度：100%；
身高：100%；
背景颜色：RGBA（84,84,84,0.3）；
显示：无；
}
上传组件{
位置：绝对；
Z指数：99；
顶部：50%；
左：50%；
margin-left: - 120px；
边距：- 60px；
宽度：240px；
身高：120px；
背景颜色：# ffffff；
显示：无；
}
上传关闭{
职位：相对；
身高：30px；
背景颜色：RGB（234234234）；
}
上传关闭跨度{
位置：绝对；
右：15px；
行高：30px；
光标：指针；
}
上传内容，确认取消{
边距：15px；
}
进步{。
职位：相对；
宽度：90%；
身高：22px；
余量：4 88888%；
文本对齐：中心；
行高：22px；
边境：1px solid # CCC；
}
上传文本{
位置：绝对；
Z指数：99999；
颜色：红色；
}
上传{。
位置：绝对；
左：0；
Z指数：9999；
宽度：0%；
身高：100%；
背景颜色：蓝色；
颜色：# ffffff；
}
确认取消跨度{
显示：内联块；
宽度：60px；
身高：30px；
行高：30px；
文本对齐：中心；
背景颜色：# CCC；
光标：等待；
}
确认{。
左缘：40%；
}
取消{。
左：10px保证金；
}
jQuery代码：

$（函数（）{（））
uploadspan = $（var $ '。上传跨度）；
uploadmask = $（var $ '。上传的面具）；
uploadcontent = $（var $ '。上传组件）；
closeconfirmcancel = $（var $ '。上传关闭跨度。确认。取消）；
uploadtextspan = $（var $ '。上传文本）；
功能showmask（）{
$（。上传面具。上传组件）。Css（{显示：阻止}）；
进度条（）；
uploadspan.off美元（听到咔哒声，showmask）；
}
功能hiddenmask（）{
uploadmask.css美元（{显示：不关}）；
uploadspan.on美元（听到咔哒声，showmask）；
}
功能closeconfirmcancel（）{
uploadcontent.css美元（{显示：不关}）；
uploadtextspan.text美元（' '）。下一个（）。Css（{宽度：0 }）；
HiddenMask（）；
}
模拟/调度
功能条（）{
Var Max = 100；
var init＝0；
VaR上传；
VaR测试= setInterval（）函数（）{
init＝5；
上传= parseInt（初始化 /最大值×100）+%；
uploadtextspan.text美元（上传）。二（）。Css（{宽度：上传}）；
如果（init = 100）{
clearInterval（测试）；
uploadtextspan.text美元（'upload完成）；
$（'。确认取消跨）。Css（{光标：'pointer}）；
$（'确认'），Css（'rgb {背景颜色：（111197293）}）；
$（'取消'），Css（'rgb {背景颜色：（175194211）}）
closeconfirmcancel.on美元（听到咔哒声，closeconfirmcancel）；
}
别的{
closeconfirmcancel.off美元（听到咔哒声，closeconfirmcancel）；
$（'。上传关闭跨度），（听到咔哒声，函数（））{
clearInterval（测试）；
closeconfirmcancel（）；
}）；
}
}，1000）；
}
uploadspan.on美元（听到咔哒声，showmask）；
}）
jQuery文件上传进度条，可以显示上传的百分比等信息，内容在这里，希望大家能喜欢。