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

控制器代码:

MVC上传文件并模拟进度条的更多相关文章

  1. HTML5 jQuery+FormData 异步上传文件,带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

  2. Spring Boot上传文件(带进度条)

    Spring Boot 上传文件(带进度条)# 配置文件 spring: freemarker: template-loader-path: classpath:/static/ ##Spring B ...

  3. spring mvc + xmlHttpRequest2.0 实现无刷新上传文件,带进度条和剩余时间

    1.springmvc支持文件上传,需要在spring-mvc.xml配置文件中加上下面的一段话: <!-- 支持上传文件 --> <bean id="multipartR ...

  4. ajax 上传文件,显示进度条,进度条100%,进度条隐藏,出现卡顿就隐藏进度条,显示正在加载,再显示上传完成

    <form id="uploadForm" method="post" enctype="multipart/form-data"&g ...

  5. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

  6. js上传文件(可自定义进度条)

    //本地上传图片.语音 function rsc_UploadFile(file) { ]; //创建一个FormData空对象,然后使用append方法添加key/value var fd = ne ...

  7. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  8. Spring MVC上传文件原理和resolveLazily说明

    问题:使用Spring MVC上传大文件,发现从页面提交,到进入后台controller,时间很长.怀疑是文件上传完成后,才进入.由于在HTTP首部自定义了“Token”字段用于权限校验,Token的 ...

  9. Spring MVC上传文件

    Spring MVC上传文件 1.Web.xml中加入 <servlet> <servlet-name>springmvc</servlet-name> <s ...

随机推荐

  1. 使用VS2015编写驱动时出现的部分错误以及解决方法

    前几日在github上下载了一个Windows驱动的demo,原本想着直接下载下来打开解决方案就可以用,没想到一编译,出现了奇奇怪怪的Error,部分Error网上也没什么好的解决办法,对我这个从未深 ...

  2. spring cache redis

    一.使用开源包(spring-data-redis) 1.引入jar包 <dependency>      <groupId>org.springframework.data& ...

  3. js中的this关键字

    this是Javascript语言的一个关键字它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用,下面分四种情况,详细讨论this的用法 this是Javascript语言的一个关键字. 它 ...

  4. 七、docker基本命令

    Docker 基本命令 docker的基本命令 docker version :查看docker的版本号,包括客户端.服务端.依赖的Go等 [root@centos7 ~]# docker versi ...

  5. HTTP/1.1协议支持的8种请求方法

    方法 说明 GET 获取资源 POST 传输实体主体 PUT 传输文件 DELETE 删除文件 HEAD 获得报文首部 OPTIONS 询问支持的方法 TRACE 追踪路径 CONNECT 要求用隧道 ...

  6. OSPF 提升四 Network Types & FRAM-RELAY

    Network Types 1.loopback 2.point-to-point 3.broadcast 4.NBMA 5.POINT-TO-Multipoint 6.point-To-Multip ...

  7. 【LeetCode】Available Captures for Rook(车的可用捕获量)

    这道题是LeetCode里的第999道题. 题目叙述: 在一个 8 x 8 的棋盘上,有一个白色车(rook).也可能有空方块,白色的象(bishop)和黑色的卒(pawn).它们分别以字符 &quo ...

  8. 2017年 湘潭邀请赛(湖南)or 江苏省赛

    这套题是叉姐出的,好难啊,先扫一遍好像没有会做的题了,仔细一想好像D最容易哎 Super Resolution Accepted : 112   Submit : 178 Time Limit : 1 ...

  9. ICMP TYPE CODE

    TYPE CODE Description Query Error 0 0 Echo Reply——回显应答(Ping应答) x   3 0 Network Unreachable——网络不可达   ...

  10. Codeforces Round #354 (Div. 2)——C. Vasya and String(尺取)

    C. Vasya and String time limit per test 1 second memory limit per test 256 megabytes input standard ...