本文介绍了一个使用jQuery实现的文件上传功能及进度条显示的方法。通过设置HTML与JavaScript代码，可以实现在用户上传文件过程中动态展示上传进度。此外，还支持选择导入实际数据或预测数据。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<style type="text/css">
#divprogressbar{
width:350px;
height:30px;
}
.progress-label{
float:left;
margin-left:40%;
margin-top:3px;
}
</style>
<script type="text/javascript">
jQuery(function () {
jQuery("#uploadSuccess").hide();
jQuery('form#upload').ajaxForm(function (data) {
// jQuery("#uploadSuccess").html(data);
// jQuery("#uploadSuccess").show();
$('#divprogressbar').progressbar({value:100});
clearTimeout(t2);
$(".progress-label").text(data);
});
});
//进度条控制
function progressBar(data){
$('#divprogressbar').progressbar({value:0});
$('#divprogressbar').progressbar({
value:0,
change:function(){
$(".progress-label").text($("#divprogressbar").progressbar("value")+"%");
},
complete:function(){
$(".progress-label").text(data);
return true;
}
});
function progress(){
var val= $('#divprogressbar').progressbar("value") || 0;
$('#divprogressbar').progressbar("option","value",val+1);
if(val<99)
{
t2= setTimeout(progress,100);
}else{
val=0;
t2= setTimeout(progressBar(""),100);
}
}
setTimeout(progress,100);
}
</script>
<body>
<br/>
<div id="divprogressbar"><div class="progress-label"></div></div>
<div id="uploadSuccess">上传中</div>
<form id="upload" onsubmit="progressBar('')" action="dataservice/db/db_save.jsp?handle=importData&ds_db_id=<%=request.getParameter("ds_db_id")%>&db_table=<%=request.getParameter("db_table")%>" enctype="multipart/form-data" method="post">
<input type="file" id="excel" name="excel">
<input type="submit" value="导入">
<br>
<input type="radio" name="dataType" value="0" />实际数据<br />
<input type="radio" name="dataType" value="1" />预测数据<br />
</form>
</body>
</html>
扫一扫
1273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
