zoukankan      html  css  js  c++  java
  • 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()" />
            <% } %>

    控制器代码:

  • 相关阅读:
    KVC的取值和赋值
    OC中属性的内存管理
    mysql的通信协议
    Proactor模式&Reactor模式详解
    Linux异步IO学习
    Redis 分布式锁的实现原理
    redis过期键
    智能指针
    std::unique_lock与std::lock_guard
    手撕代码
  • 原文地址:https://www.cnblogs.com/a849788087/p/5662738.html
Copyright © 2011-2022 走看看