新手入門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

總結

以上是生活随笔為你收集整理的实现一个简单的文件上传进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。