实现一个简单的文件上传进度条
新手入门web 文件上传完成 取得的进展 没有进度条只能用文字 不好看 必须是一个进度条 没有艺术 互联网很 进度条 需要图片 有多种帧的 他看上去好麻烦 让自己的单纯 很简单 我没想到这么复杂 共享
jsp页面
<tr>
<td width="100">图片</td>
<td>
<div style="width: 450px;">
<div class="file-box">
<input type='text' name='textfieldimg' id='textfieldimg' class='txt' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="file" class="file" id="fileupload2" size="28" οnchange="document.getElementById('textfieldimg').value=this.value" data-url="http://192.168.6.53:8080/upload" />
</div>
<div id="div_progress2" style="visibility: hidden;" class="progress_div1" >
<div class="progress_div3" >
<div id="pro2" style="float: left;width: 0px;background-color: blue; height: 15px;"></div>
</div>
<div class="progress_div2"><span style="margin-left: 10px;" id="progress2"></span></div>
</div>
</div>
</td>
<td></td>
</tr>
js
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery.ui.widget.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery.iframe-transport.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery.fileupload.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/script/jquery-1.8.3.min.js"></script>
$('#fileupload2').fileupload({
progress: function (e, data) {
var pro = parseInt(data.loaded / data.total * 100, 10);
var div2 = document.getElementById("div_progress2");
div2.style.visibility = "visible";
var p2 = document.getElementById("pro2");
p2.style.width=pro;
$('#progress2').text(pro + '%');
if(pro==100){
$('#progress2').text('上传成功');
var path2 = document.getElementById('textfieldimg').value;
var name2 = getFileName(path2);
document.getElementById('imageFilename').innerText = name2;
}
}
});
});
css
.txt {
height: 22px;
border: 1px solid #91c0e3;
width: 180px;
}
.btn {
background-color: #FFF;
border: 1px solid #CDCDCD;
height: 24px;
width: 70px;
}
.file-box {
float:left;
position: relative;
width: 260px
}
.file {
position: absolute;
top: 0;
right: 10px;
height: 24px;
filter: alpha(opacity : 0);
opacity: 0;
width: 260px
}
.progress_div1{
width:190px;
height:20px;
vertical-align:middle;
margin-left: auto;
}
.progress_div2{
margin-left:auto;
width:90px;
height:20px;
vertical-align: middle;
padding-top: 3px;
}
.progress_div3{
float:left;
width: 100px;
height: 15px;
background-color: white;
border:solid 1px blue;
vertical-align: middle;
margin-top: 3px;
}
版权声明:本文博客原创文章。博客,未经同意,不得转载。
转载于:https://www.cnblogs.com/hrhguanli/p/4744044.html
实现一个简单的文件上传进度条相关推荐
- html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示
这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,对HTML5上传进度条感兴趣的小伙伴们可以参考一下 原本打 ...
- html资源文件记载进度条,HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- jquery和php上传文件进度条,jQuery实现文件上传进度条特效_jquery
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前 ...
- HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- 大文件上传 进度条显示(仿CSDN资源上传效果) .
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层 并显示上传这个过程 我这里设置太透明了 效果不是很立体 文件结构如图: 说明:用到"高山来客" ...
- django文件——django + jquery-file-upload上传篇(二)-- 插件实现文件上传+进度条显示 +拖入文件上传...
django + jquery-file-upload 插件实现文件上传+进度条显示 1.model.py class Fujian(models.Model):name = models.CharF ...
- 大文件上传 进度条显示(仿CSDN资源上传效果)
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层 并显示上传这个过程 我这里设置太透明了 效果不是很立体 文件结构如图: 说明:用到"高山来客" ...
- js实现文件上传进度条功能
开发中可能会涉及到需要展示文件上传进度条显示,方便用户知道文件的上传状态.其实进度条展示只需要拿到文件已上传的大小,和被上传文件的总大小即可.废话不多说直接上代码!! class fileUpload ...
- php大文件上传插件,PHP 大文件上传进度条实现
目前我知道的方法有两种,一种是使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc),另外一种方法是使用PECL扩 ...
最新文章
- Linux的shell scripts的shell脚本练习
- oracle mysql sql serve where in 语句的不同
- 【分布式共识二】拜占庭将军问题----口头协议
- access查询出生日期格式转换_从身份证中提取出生日期的3个方法和计算年龄和星座的方法...
- P5068 [Ynoi2015]我回来了
- Linux系统编程13:进程入门之Linux中的环境变量的概念及其相关命令(export;env等)main函数的参数
- 基于phonegap,html5,ratchet,handlebars等技术的微表情APP
- 微信做了个新功能,网友并不买账:就为了给QQ充会员?
- Jenkins+git 实现代码自动发布
- Asp.net MVC 移除视图引擎(WebFormViewEngine或者RazorViewEngine)
- vue学习笔记-15-vue生命周期
- RCC_APB2Periph_AFIO时钟一般在什么时候下需要开启?
- Fern wifi cracker 无线破解工具——图解
- 中国沛县高层次人才创新创业大赛(深圳赛区)报名启动
- 分享多张图片到微信朋友圈
- 25.(cesium之家)cesium军事标绘-攻击箭头采集(燕尾)
- Web前端开发工程师必备技术列表
- 扫描MAC地址脚本--保存
- 01矩阵最大正方形面积、01矩阵最大矩形面积、直方图最大矩形面积
- 【转载】网页尺寸规范