用Html5与Asp.net MVC上传多个文件的实现代码

代码如下:

<form action="/Home/Upload" enctype="multipart/form-data" id="form2" method="post">
<input type="file" name="fileToUpload" id="fileToUpload2" multiple="multiple" />
<input type="submit" value="submit" />
</form>

那在Asp.net MVC web application中，我们可以这么实现：


代码如下:

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "form2" }))
{
<label for="file">Upload Image:</label>
<input type="file" name="fileToUpload" id="fileToUpload2" multiple="multiple" />
<input type="submit" value="Upload Image by submit" />
}

假设这是一个HomeController下View, 即将提交到Upload的Action,看下面服务端的代码:


代码如下:

[HttpPost]
public ActionResult Upload(HttpPostedFileBase[] fileToUpload)
{
foreach (HttpPostedFileBase file in fileToUpload)
{
string path = System.IO.Path.Combine(Server.MapPath("~/App_Data"), System.IO.Path.GetFileName(file.FileName));
file.SaveAs(path);
}

ViewBag.Message = "File(s) uploaded successfully";
return RedirectToAction("Index");
}

好的，就这么简单。 这里我们把接收到文件存储到App_Data文件夹中，然后返回Index的Action. 看下面图片，我们能够从文件选择器选择多张图片：

关于HTML5这个特性在那些浏览器支持，您可以去这里查看。 您还可以查看W3C官方的文档。我们在FireFox 14.01下测试能过。

希望对您Web开发有帮助。

赞 (0)

相关推荐

  • ASP.NET MVC处理文件上传的小例子

    复制代码 代码如下: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Files uploaded to server</h2> <div id="dialog" title="Upload files"> <% using (Html.B

  • ASP.NET MVC5实现文件上传与地址变化处理（5）

    ASP.NET MVC5实现文件上传与地址变化处理（5）

    一.上传文件和重复文件处理 文件处理的原则是:不在数据库中保存文件,只在数据库中保存文件信息(Hash值等).采取文件的MD5重命名文件在一般情况足够处理文件的重复问题,强迫症倾向则可以考虑将MD5和其他摘要算法结合. public static string Save(HttpPostedFileBase file, string path) { var root = "~/Upload/" + path + "/"; var phicyPath = Hostin

  • ASP.NET MVC 文件上传教程(一）

    ASP.NET MVC 文件上传教程(一）

    这一节我们来讲讲在MVC中如何进行文件的上传,我们逐步深入,一起来看看. Upload File(一) 我们在默认创建的项目中的Home控制器下添加如下: public ActionResult UploadFile() { return View(); } [HttpPost] public ActionResult UploadFile(HttpPostedFileBase file) { var fileName = file.FileName; var filePath = Server

  • ASP.NET MVC文件上传教程(二）

    ASP.NET MVC文件上传教程(二）

    上文ASP.NET MVC 文件上传教程(一)我们讲了简单的上传以及需要注意的地方,查相关资料时,感觉上传里面涉及到的内容还是比较多,于是就将上传这一块分为几节来处理,同时后续也会讲到关于做上传时遗漏的C#应该注意的地方,及时进行查漏补缺,尽量将这一块完善起来. 引入 上一节我们讲到了上传这一块,有朋友提出未涉及到大文件的上传这一块,思前想后还是来试着做做,毕竟之前没怎么去仔细考虑过这个问题,尤其还可以联系实际开发中创建文件夹等一系列问题,同时关于上传在网上随便找找都充斥着大量的组件,我们何必再

  • ASP.NET MVC HttpPostedFileBase文件上传的实例代码

    本文介绍了ASP.NET MVC HttpPostedFileBase文件上传 ,分享给大家,希望对大家有帮助 HttpPostedFileBase文件上传,支持多文件一次上传,如有图片,则支持略缩图保存 文件传输信息封装 /// <summary> /// 文件生成方式 /// </summary> public class UpFileMessage { /// <summary> /// 文件名 /// </summary> public string

  • asp.net mvc 实现文件上传带进度条的思路与方法

    asp.net mvc 实现文件上传带进度条的思路与方法

    前言 文件上传与下载的操作在实际项目中经常是很重要的一个内容,在使用ASP.NET Web Form的时候我们可以使用诸多的服务器控件,FileIpload就是其中之一,但是在ASP.NET不建议使用那些服务器控件,因为那样违反三层架构原则.最近参考网络资料,学习了ASP.NET MVC如何上传文件. 而这篇文章主要重点是asp.net mvc 实现文件上传带进度条,下面来一起看看吧. 实现思路 ajax异步上传文件,且开始上传文件的时候启动轮询来实时获取文件上传进度.保存进度我采用的是memc

  • asp.net中MVC借助Iframe实现无刷新上传文件实例

    本文实例讲述了asp.net中MVC借助Iframe实现无刷新上传文件的方法.分享给大家供大家参考.具体实现方法如下: html: 复制代码 代码如下: <div id="uploadwindow" style="display: none;">     <form action="/ShopActivitys/ImportActivityItems" id="form1" name="form1&

  • ASP.NET MVC4 利用uploadify.js多文件上传

    页面代码: 1.引入js和css文件 <link href="~/Scripts/uploadify/uploadify.css" rel="external nofollow" rel="stylesheet" /> <style type="text/css"> #upDiv { width: 550px; height: 400px; border: 2px solid red; margin-t

  • Asp.net实现MVC处理文件的上传下载功能实例教程

    上传于下载功能是程序设计中非常常见的一个功能,在ASP.NET程序开发中有着非常广泛的应用.本文就以实例形式来实现这一功能. 一.概述 如果你仅仅只有Asp.net Web Forms背景转而学习Asp.net MVC的,我想你的第一个经历或许是那些曾经让你的编程变得愉悦无比的服务端控件都驾鹤西去了.FileUpload就是其中一个,而这个控件的缺席给我们带来一些小问题.这篇文章主要说如何在Asp.net MVC中上传文件,然后如何再从服务器中把上传过的文件下载下来. 二.实现方法 1.文件上传

  • 用Html5与Asp.net MVC上传多个文件的实现代码

    用Html5与Asp.net MVC上传多个文件的实现代码

    复制代码 代码如下: <form action="/Home/Upload" enctype="multipart/form-data" id="form2" method="post"> <input type="file" name="fileToUpload" id="fileToUpload2" multiple="multiple

  • 实现Asp.net mvc上传头像加剪裁功能

    实现Asp.net mvc上传头像加剪裁功能

    在我们使用QQ上传头像,注册用户账号时是不是都会遇到上传图像,并根据自己的要求对图像进行裁剪,这是怎么实现的呐? 本文主要介绍了Asp.net mvc实现上传头像加剪裁功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 前台代码 <link href="~/Content/fineuploader.css" rel="stylesheet" /> <link href="~/Content/jquery.Jcrop

  • 实现Asp.net mvc上传头像加剪裁功能

    实现Asp.net mvc上传头像加剪裁功能

    在我们使用QQ上传头像,注册用户账号时是不是都会遇到上传图像,并根据自己的要求对图像进行裁剪,这是怎么实现的呐? 本文主要介绍了Asp.net mvc实现上传头像加剪裁功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 前台代码 <link href="~/Content/fineuploader.css" rel="stylesheet" /> <link href="~/Content/jquery.Jcrop

  • ASP.NET webUploader上传大视频文件相关web.config配置

    在webuploader上传大文件时必须配置一下,不然请求后台处理程序时,会请求超时.出现404! <system.web> <httpRuntime maxRequestLength="2040000" useFullyQualifiedRedirectUrl="true" executionTimeout="6000" minFreeThreads="8" minLocalRequestFreeThrea

  • 使用FormData实现上传多个文件

    本文实例为大家分享了FormData上传多个文件的具体代码,供大家参考,具体内容如下 由于项目中使用到,特此写个Demo html代码: <html> <head> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <

  • Java Spring MVC 上传下载文件配置及controller方法详解

    下载: 1.在spring-mvc中配置(用于100M以下的文件下载) <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"> <property name="messageConverters"> <list> <!--配置下载返回类型--> <bean class="or

  • ASP.NET实现上传Excel功能

    这几天正好用到上传Excel,并根据Excel中的数据做相应的处理,故整理以备用. 用到的资源: (1)NOPI 2.2.0.0 可自己官网下载,也可点击:http://pan.baidu.com/s/1b1EMdg (2)用到一些常见处理文件的公共方法类,可以添加到项目中:http://pan.baidu.com/s/1bJpHuQ 如过上述连接因故无法使用,可在评论留下邮箱,我打包发送过去,如有更好的建议,欢迎指导. 后台的提示方法ShowMsgHelper,根据自己的改写即可. 前台代码:

  • Asp.net FileUpload上传文件夹并检测所有子文件的实现代码

    Asp.net FileUpload上传文件夹并检测所有子文件的实现代码,非常简单,具体内容如下所示: 1.在FileUpload控件添加一个属性 webkitdirectory=""就可以上传文件夹了 <asp:FileUpload ID="FileUpload1" runat="server" webkitdirectory="" /> 2.检测文件夹下所有子文件 string DirectoryName =

  • JS+html5实现异步上传图片显示上传文件进度条功能示例

    本文实例讲述了JS+html5实现异步上传图片显示上传文件进度条功能.分享给大家供大家参考,具体如下: <html> <head> </head> <body> <p> emo_album_id:<input type="text" name="emo_album_id" id="emo_album_id" value='1'> </p> <p> na

  • php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析

    本文实例讲述了php 下 html5 XHR2 + FormData + File API 上传文件操作.分享给大家供大家参考,具体如下: FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormData的最大优点就是我们可以异步上传一个二进制文件. 例1如下: <!DOCTYPE HTML> <html lang="zh-CN"

随机推荐