进度条样式和JS
<style type="text/css"> .spa { font-size: 12px; color: #0066ff; } .put { font-size: 12px; font-family: Arial; color: #0066ff; background-color: #fef4d9; padding: 0px; border-style: none; } .put2 { font-size: 12px; color: #0066ff; text-align: center; border-width: medium; border-style: none; } </style>
var bar = 0; var line = "||"; var amount = ""; document.getElementById("up").style.display = "none"; function count() { if (f.value == "") { alert("请添加上传文件"); return false; } document.getElementById("up").style.display = "inline"; bar = bar + 2; amount = amount + line; document.getElementById("chart").value = amount; document.getElementById("percent").value = bar + "%"; if (bar < 100) { setTimeout("count()", 40); } else { document.getElementById("up").style.display = "none"; } }
<div id="up"> <span class="spa">上传中,请稍等...</span> <input id="chart" type="text" size="50" class="put" /> <input id="percent" type="text" size="20" class="put2" /> </div> <div style="float: left"> <%using (Html.BeginForm("UploadFile", "Config", FormMethod.Post, new { enctype = "multipart/form-data" })) { %> <br /> <input type="file" name="file" /> <input type="submit" value="上传文件" onclick="count()" /> <% } %>
控制器代码: