标签：进度条文件上传 jsp js javascript
新手初学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" onchange="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;
}
标签：进度条文件上传 jsp js javascript
原文地址：http://blog.csdn.net/tonyyxm/article/details/32150953
