初始图片:

 选中图片后

 

  ----------------------------------------------------------------------------------

  前端代码
  

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
@using (Html.BeginForm("SaveFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="pageFormContent" >
<script type="text/javascript">
var num = 0;
function FileSelect(n) {
if ($("div[id*='div']").length > 0)
{
num = parseInt($("div[id*='div']").last().attr("id").replace("div", "")) + 1;
}
else {
num = 0;
num++; }
// alert("num:"+num + " n:"+n);
if (num - 1 <= n)
{
$("#DIV_Files").append('<div id="div' + num + '" > <input name="files" type="file" multiple="multiple" onclick="FileSelect(' + num + ')" /> <input type="button" name="delInput" value="移除" onclick="DelFile(div' + num + ')" /></div>');
}
}
function DelFile(sss) {
$(sss).remove();
} function onload() {
// FileSelect(0);
}
</script>
<div id="DIV_Files" style=" height:300px; width:450px; padding-left:10px; background-color:gray; overflow:scroll">
<div>
<input id="file" name="files" type="file" multiple="multiple" onclick="FileSelect(0)"/>
</div>
</div>
<input id="submit" type="submit" value="批量上传" />
@ViewBag.Msg
</div> }

     multiple="multiple":表示可以多选,js中代码实现点击最后一个上传input会立即生成一个input,并可以移除.样式什么的,自己定义 

----------------------------------------------------------------------------------

HomeController 中代码

public ActionResult Index(string message)
{
ViewBag.Msg = message;
return View();
} [HttpPost]
public ActionResult SaveFile(IEnumerable<HttpPostedFileBase> files)
{
string msg = string.Empty;
foreach (HttpPostedFileBase file in files)
{
if (file != null && file.ContentLength > 0)
{
file.SaveAs(Server.MapPath("~/") + Path.GetFileName(file.FileName));
//msg = "Suc";
}
else
{
// msg = "Fail";
}
} return RedirectToAction("Index","Home",new {message=msg});
}

  

MVC批量上传文件的更多相关文章

  1. MVC批量上传文件(使用uploadify)

    <script src="JS/jquery-1.8.3.js"></script> <script src="uploadify/jque ...

  2. spring mvc(注解)上传文件的简单例子

    spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...

  3. Linux命令之rz - 批量上传文件,简单易用(转载)

    用途说明 rz命令能够批量上传文件,当然也可上传单个文件啦.使用的协议是古老的ZMODEM协议,尽管协议古老,但毫不影响的简单易用的特性.一般情 况我们要上传文件到Linux系统,要么使用ftp(还得 ...

  4. 转 Android网络编程之使用HttpClient批量上传文件 MultipartEntityBuilder

    请尊重他人的劳动成果,转载请注明出处:Android网络编程之使用HttpClient批量上传文件 http://www.tuicool.com/articles/Y7reYb 我曾在<Andr ...

  5. 不带插件 ,自己写js,实现批量上传文件及进度显示

    今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是 ...

  6. Python基于Python实现批量上传文件或目录到不同的Linux服务器

    基于Python实现批量上传文件或目录到不同的Linux服务器   by:授客 QQ:1033553122 实现功能 1 测试环境 1 使用方法 1 1. 编辑配置文件conf/rootpath_fo ...

  7. input file multiple 批量上传文件

    这几天维护系统,有一个批量上传文件功能,出现了一点小问题 我的笔记本选择要上传的文件很正常 但在测试环境上,别人的电脑上,选择上传文件之后 一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...

  8. Asp.Net Mvc异步上传文件的方式

    今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax ...

  9. 使用 sendKeys(keysToSend) 批量上传文件

    未经允许,禁止转载!!! 在selenium里面处理文件上传的时候可以使用sendKeys(keysToSend) 上传文件 例如: element.sendKeys(“C:\\test\\uploa ...

随机推荐

  1. At least one JAR was scanned for TLDs yet contained no TLDs.

    Tomcat提示如下: At least one JAR was scanned for TLDs yet contained no TLDs. =========================== ...

  2. Cannot find autoconf. Please check your autoconf installation and the $PHP_AUTOCONF environment variable. Then, rerun this scrip

    在运行phpize时出现的错误 > /data/php/bin/phpize Configuring for: PHP Api Version: 20131106 Zend Module Api ...

  3. ip地址后边加个/8(16,24,32)是什么意思

    是掩码的位数,A类IP地址的默认子网掩码为255.0.0.0(由于255相当于二进制的8位1,所以也缩写成“/8”,表示网络号占了8位);B类的为255.255.0.0(/16);C类的为255.25 ...

  4. 5. Import the project download from Git

    1.Recover eclipse project Copy .project from other project(You can new a project first in eclipse. T ...

  5. hive的用户和用户权限

    HiverServer2支持远程多客户端的并发和认证,支持通过JDBC.Beeline等连接操作.hive默认的Derby数据库,由于是内嵌的文件数据库,只支持一个用户的操作访问,支持多用户需用mys ...

  6. 01 Linux 网络配置和克隆

    Linux 网络配置和克隆 一.配置 Linux 网络 当在 VMware 中安装完 Linux 以后需要通过一些网络配置才能使 Linux 能够连能网络: 首先如果是在虚拟机上安装的 Linux 必 ...

  7. vuex入门文档

    如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 . 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一 ...

  8. jquery 插入节点的方法

    方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码: <p>我想说:</p> jQuery代码: $("p").append(& ...

  9. 修改BUG心得

      修改BUG心得 分类: 项目管理/CMMI2013-01-14 22:06 845人阅读 评论(0) 收藏 举报 目录(?)[-] 一 二 三 一. 1.写第一版时就杜绝这些的发生. 2.思维要开 ...

  10. 20145226夏艺华 《Java程序设计》第8周学习总结

    教材学习内容总结 学习目标 了解NIO 会使用Channel.Buffer与NIO2 会使用日志API.国际化 会使用正则表达式 了解JDK8增强功能 第14章 NIO与NIO2 14.1 认识NIO ...