一起谈.NET技术,探索Asp.net mvc 的文件上传(由浅入深)

简介:   代码下载:http://files.cnblogs.com/n-pei/mvcfileupload.zip  最近因为TeamVideo需要用到视频和图片上传功能,所以试着Google了很多资料,和大家分享下。

  代码下载:http://files.cnblogs.com/n-pei/mvcfileupload.zip

  最近因为TeamVideo需要用到视频和图片上传功能,所以试着Google了很多资料,和大家分享下。

  1.最基本的文件上传

clip_image001

  在View界面通过Form把数据POST到控制端(Controller),Controller把文件存储到服务器,再Redirect到其他页面。

  View部分的代码:

clip_image003

  Controller部分需要判断是否有Post过来文件,有文件就保存,再重定向到index页面。

clip_image005

  上面的例子是最简单的,下一步我们考虑给它加上一个jQuery的UI,让上传文件时的样子变成如下:

clip_image006

  要达到这个效果,首先需要下载jQuery UI的几个插件。

clip_image007

  在模板中添加这些脚本:

clip_image009

  把上面实现的简单的文件上传放到一个DIV中,我们需要实现的功能是当鼠标点击某个按钮时,这个DIV会弹出来。

clip_image011

  最后是DIV弹出的脚本:

clip_image012

  接下来我们考虑把图片上传到服务器后再让它显示在当前页面中。显示的效果如下:

clip_image014

  也就是说我们在上传图片到服务器端后,需要得到此图片的创建时间,大小名称等。

clip_image016

  FileRepository把文件的信息放到一个List中:

clip_image017  通过Controller部分把这个List传递给View。View部分的代码请参考附件。对于图片的存储,我下一步想着把它存储在数据库中。首先是创建表结构:

clip_image018

  使用ADO.NET Data Model来存储数据,所以我们需要创建一个edmx文件。

clip_image019

  保存到图片到数据库中的Controller部分:

clip_image020

  View部分代码:

clip_image022

  过程如下图:

clip_image024

  这里需要一个辅助类来帮助输入文本的Post。你可以在下载的代码中看到。上传图片并保存到数据库中,我们还需要来把图片显示出来,这个相对来说就比较麻烦了。搜索了很久才找到的方法如下:

clip_image025

  保存图片到数据库后的查询结果:

clip_image027

  目前我还不知道如何把一个List的图片显示出来。希望谁能够提供一个好的解决方案。传统的方法来存储文件(图片)上面的介绍已经很多了。如何使用AJAX方法来存储文件到服务器呢?我搜索了下,比较多的是使用jQuery Form这个插件来实现的。

clip_image029

  你需要去下载jQuery Form这个插件,放到你的Script文件夹中。并在Master模板中添加。当你点击Button时,创建一个Form并使用AJAX方式POST到服务器端保存。保存方式就不说了,下面是使用jQuery Form的JS代码:

clip_image031

  除了使用jQuery form这个插件还有其他的AJAX方式实现文件的上传:

  我举两个例子:

  1. jQuery & Flash AJAX上传文件

  代码地址:http://swfupload.googlecode.com/

  主要是通过Flash和js的交互用flash程序来post数据到后台的Controller。除了flash部分,其它的和上面介绍的代码大同小异。我会在代码包里放上这部分的代码,供大家下载。

  效果:

clip_image032

  2. 纯jQueryAJAX上传文件(http://valums.com/ajax-upload/)

  这个推荐大家看一下。

clip_image033

  看这边文章的同仁们,周末愉快,呵呵。

  参考资料:

  http://weblogs.asp.net/imranbaloch/archive/2010/04/03/image-preview-in-asp-net-mvc.aspx

  http://weblogs.asp.net/jgalloway/archive/2008/01/08/large-file-uploads-in-asp-net.aspx  

  http://www.highoncoding.com/Articles/689_Uploading_and_Displaying_Files_Using_ASP_NET_MVC_Framework.aspx

  http://www.mikesdotnetting.com/Article/125/ASP.NET-MVC-Uploading-and-Downloading-Files

  http://valums.com/ajax-upload/

目录
相关文章
|
2月前
|
开发框架 前端开发 .NET
ASP.NET WEB——项目创建与文件上传操作
ASP.NET WEB——项目创建与文件上传操作
46 0
|
6月前
|
前端开发 Java Go
Spring MVC 中的数据验证技术
Spring MVC 中的数据验证技术
45 0
|
6月前
|
存储 开发框架 前端开发
asp.net与asp.net优缺点及示例
asp.net与asp.net优缺点及示例
|
3月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
38 0
|
1月前
|
开发框架 中间件 .NET
C# .NET面试系列七:ASP.NET Core
## 第一部分:ASP.NET Core #### 1. 如何在 controller 中注入 service? 在.NET中,在ASP.NET Core应用程序中的Controller中注入服务通常使用<u>依赖注入(Dependency Injection)</u>来实现。以下是一些步骤,说明如何在Controller中注入服务: 1、创建服务 首先,确保你已经在应用程序中注册了服务。这通常在Startup.cs文件的ConfigureServices方法中完成。例如: ```c# services.AddScoped<IMyService, MyService>(); //
60 0
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
95 5
|
4月前
|
开发框架 .NET
Asp.Net文件上传
Asp.Net文件上传
24 0
|
5月前
|
开发框架 自然语言处理 前端开发
基于ASP.NET MVC开发的、开源的个人博客系统
基于ASP.NET MVC开发的、开源的个人博客系统
51 0
|
6月前
|
SQL 前端开发 Java
JSP个人信息管理系统myeclipse开发sql数据库BS模式java编程struts2技术mvc框架
JSP 个人信息管理系统是一套完善的web设计系统,对理解JSP java编程开发语言有帮助struts2技术mvc框架,系统具有完整的源代码和数据库,开发环境为TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5.0,使用java语言开发,系统主要采用B/S模式开发。
56 0
|
6月前
|
SQL 前端开发 Java
JSP网上订餐管理系统myeclipse开发sql数据库BS模式java编程servlet技术mvc框架
JSP 网上订餐管理系统是一套完善的web设计系统,对理解JSP java编程开发语言有帮助servlet技术mvc框架,系统具有完整的源代码和数据库,开发环境为TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5.0,使用java语言开发,系统主要采用B/S模式开发。
38 0