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

新手入门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; 
 
}

版权声明：本文博客原创文章。博客，未经同意，不得转载。