MVC上传文件并模拟进度条

进度条样式和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()" />
        <% } %>

控制器代码:

 

posted @ 2016-07-12 10:50  Cherry的冬天  阅读(309)  评论(0)    收藏  举报