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

新手初学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; 
 
}

简单实现一个文件上传的进度条,布布扣,bubuko.com

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

原文：http://blog.csdn.net/tonyyxm/article/details/32150953