JQuery和Servlet实现文件上传进度条,能显示上传速度,上传的百分比等

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">


<title>上传进度条</title>
<script type="text/javascript" src="<%=path%>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/progressBar.js"></script>
<style type="text/css">
body {
font-size: 11px;
}

#progress {
left: 400px;
top: 200px;
position: absolute;
width: 320px;
height: 50px;
border: 1px solid black;
display: none;
}

#progressBar {
border: 1px solid black;
width: 240px;
height: 15px;
margin-left: 20px;
margin-top: 15px;
}

#uploaded {
height: 10px;
width: 1px;
background-color: #4DF011;
}

#title {
height: 15px;
background-color: #B511F0;
pading: -10px;
}

#close {
width: 10px;
height: 10px;
right: 1px;
top: 0px;
position: absolute;
display: none;
cursor: pointer;
}
</style>
</head>


<body>
<iframe id='target_upload' name='target_upload' src=''
style='display: none'></iframe>
<form action="./upload" id="uploadForm" enctype="multipart/form-data"
method="post" target="target_upload">
<input type="file" name="upload">
<input type="button" id="subButton" value="上传">
</form>
<div id="progress">
<div id="title" align="center">
<span id="text">上传进度</span>
<div id="close">
X
</div>
</div>
<div id="progressBar">
<div id="uploaded"></div>
</div>
<div style="font-size:9px;" align="center" id="info"></div>
</div>
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值