简而言之，直接用代码展示如何实现文件的上传，这里需要使用到一个bootstrap的文件上传插件File Input（请自行下载）。

前台页面：

<!---->

<!DOCTYPE html>

<html >

    <head>

        <meta charset="UTF-8">

        <link rel="stylesheet" href="css/bootstrap.min.css" />

        <link rel="stylesheet" href="css/default.css" />

        <link rel="stylesheet" href="css/fileinput.css" />

    </head>

    <body>

        <div class="form-group add-pic-box">

            <h2 class="add-pic-head">添加图片</h2>

                   <input id="upload-file"  type="file" multiple class="file" data-min-file-count="1">

            </div>

        <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>

        <script type="text/javascript" src="js/bootstrap.min.js" ></script>

        <script type="text/javascript" src="js/fileinput.js" ></script>

        <script type="text/javascript" src="js/fileinput_locale_zh.js" ></script>

        <script type="text/javascript">

        //当然这里参数没有介绍完，可以更具需求参考其使用文档

        $("#upload-file").fileinput({

            uploadUrl: '/User/AddPicture', //这是要将文件上传到哪里的url

            uploadAsync: false,//是否进行文件异步上传

            maxFileSize: 10485760,//字节，fileinput.js默认是按照1000个字节为1kb来计算的，这个自己可以修改为1024

            minFileCount: 1,//最少上传文件数量

            maxFileCount: 1,//最大上传文件数量

            allowedFileExtensions: ['jpg', 'png', 'gif'],//上传文件限制的类型

            uploadExtraData: function () {

           //这里是附加数据 description 对应于后台Action中的参数名称

            return { description: "这是一个描述" };//可以更加需求获取一个动态的值

        },

        ajaxSettings: {

            //这里是重写文件上传成功后，前台处理后台返回json数据

            success: function(data)

            {

                alert(data.title, data.massage);

            }

        }

    });

        </script>

    </body>

</html>

要使用File Input插件上传文件主要要引入了fileinput.css、fileinput.js以及fileinput_locale_zh.js（中文化）三个文件，其它的都是bootstrap的一些样式（当然要使用jquery，就应当引人jquery-2.1.1.min.js或其它版本）。

后台处理代码：

//添加图片

        [HttpPost]

        public ActionResult AddPicture(string description)

        {

            var result = new JsonResult();

            //result.JsonRequestBehavior = JsonRequestBehavior.DenyGet;

            if (string.IsNullOrWhiteSpace(description))

            {

                description = "暂无";

            }

            description = description.Trim();

            if (Request.Files.Count == )

            {

                return Json(new { title = "上传失败", massage = "上传图片不能为空!" });

            }

            HttpPostedFileBase newPicture = Request.Files[];

            if (description.Length >  || newPicture == null)

            {

                return Json(new { title = "上传失败", massage = "图片简介长度不合要求!" });

            }

            int id = Convert.ToInt32(User.Identity.Name);

            string fileExt = "", fileName = "", path = Server.MapPath("~/Resources/LocalPic");

            if (newPicture.ContentLength <= )

            {

                Picture picture = new Picture();

                picture.UserId = id;

                picture.Name = newPicture.FileName.Split('\\').Last();

                picture.CreateTime = DateTime.Now;

                picture.IsForbidden = false;

                picture.IsShareOut = false;

                picture.Description = description;

                 if (picture.Name.IndexOf('.') > -)

                {

                    fileExt = picture.Name.Substring(picture.Name.LastIndexOf('.')).ToLower();

                }

                switch (fileExt)

                {

                    case ".jpg":

                    case ".png":

                    case ".gif":

                        break;

                    default:

                        return Json(new { title = "上传失败", massage = "图片后缀名不合要求!" });

                }

                fileName = DateTime.Now.ToFileTime() + Guid.NewGuid().ToString("N") + fileExt;

                picture.FilePath =  fileName;

                newPicture.SaveAs(path + @"\" + fileName);//从客户端保存文件到本地

                entity.Pictures.Add(picture);

                entity.SaveChanges();

                return Json(new { title = "上传成功", massage = "成功上传图片!" });

            }

            else

            {

                return Json(new { title = "上传失败", massage = "图片大小不合要求!" });

            }

        }

上面代码给出的是上传一张图片的的实例，若是想上传多个文件，只需更改文件后缀限制、改变maxFileCount的值以及后台处理作相应的改变，若是想采用异步上传，只需将前台代码中的uploadAsync的值改为true就可以（默认也是true）。其它的一些功能实现留给读者自己去探索和实现吧！^_^

下一节中我们将要谈到图片的截图上传。

<我的博客主页>:http://www.cnblogs.com/forcheng/

ASP.NET MVC 网站开发总结（二）——一个或多个文件的异步或同步上传的更多相关文章

  1. ASP.NET MVC 网站开发总结（一）

    历经一个多月的努力,工作室的门户网站(http://www.wingstudio.org)终于结束了内部公测. 仔细算一下,大概把网站开发出1.0版本大概用了一个月的时间(主要是利用课余时间),其后大 ...

  2. ASP.NET MVC5 网站开发实践(二) Member区域 - 咨询管理的架构

    咨询.留言.投诉等功能是网站应具备的基本功能,可以加强管理员与用户的交流,在上次完成文章部分后,这次开始做Member区域的咨询功能(留言.投诉都是咨询).咨询跟文章非常相似,而且内容更少.更简单. ...

  3. ASP.NET MVC5 网站开发实践(二) Member区域 - 添加文章

    上次把架构做好了,这次做添加文章.添加文章涉及附件的上传管理及富文本编辑器的使用,早添加文章时一并实现. 要点: 富文本编辑器采用KindEditor.功能很强大,国人开发,LGPL开源,自己人的好东 ...

  4. ASP.NET MVC5 网站开发实践(二) Member区域 - 文章管理架构

    上次把member的用户部分完成,现在开始做文章管理部分.文章部分根据涉及显示现实文章列表,发布文章,修改文章,删除文章等功能.最终的实现目标是使用权限来控制用户是否能进行相应操作,管理员权限的会显示 ...

  5. ASP.NET MVC5 网站开发实践(二) Member区域–我的咨询列表及添加咨询

    上次把咨询的架构搭好了,现在分两次来完成咨询:1.用户部分,2管理部分.这次实现用户部分,包含两个功能,查看我的咨询和进行咨询. 目录: ASP.NET MVC5 网站开发实践 - 概述 ASP.NE ...

  6. ASP.NET MVC5 网站开发实践(二) Member区域 - 修改及删除文章

    上次做了显示文章列表,再实现修改和删除文章这部分内容就结束了,这次内容比较简单,由于做过了添加文章,修改文章非常类似,就是多了一个TryUpdateModel部分更新模型数据.   目录: ASP.N ...

  7. ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表

    显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据   目录 ASP.N ...

  8. ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分（3）修改资料、修改密码

    在上一篇博客中实现了用户的注销和登录,其实代码里落了点东西,就是用户登录要更新最后一次登录时间和登录IP,这次补上.今天做修改资料和修改密码,TryUpdateModel是新用到的东西. 目录: AS ...

  9. ASP.NET MVC 网站开发总结（三） ——图片截图上传

    本着简洁直接,我们就直奔主题吧,这里需要使用到一个网页在线截图插件imgareaselect(请自行下载). 前台页面: <!DOCTYPE html> <html> < ...

随机推荐

  1. 细说.NET中的多线程 (四 使用锁进行同步)

    通过锁来实现同步 排它锁主要用来保证,在一段时间内,只有一个线程可以访问某一段代码.两种主要类型的排它锁是lock和Mutex.Lock和Mutex相比构造起来更方便,运行的也更快.但是Mutex可以 ...

  2. JavaScript正则表达式下——相关方法

    上篇博客JavaScript 正则表达式上——基本语法介绍了JavaScript正则表达式的语法,有了这些基本知识,可以看看正则表达式在JavaScript的应用了,在一切开始之前,看看RegExp实 ...

  3. 【重要更新】Senparc.Weixin.Open v1.5.1

    本次更新调整了命名空间和文件位置,具体变化为(可以直接在源代码中替换): 旧命名空间(对应文件夹) 新命名空间(对应文件夹) Senparc.Weixin.Open.OAuth Senparc.Wei ...

  4. VS 2008 生成操作中各个选项的差别

    近日,在编译C#项目时经常发现有些时候明明代码没错,但就是编译不过,只有选择重新编译或者清理再编译才会不出错,本着求学的态度,搜罗了下VS2008IDE中生成操作的种类以及差别,整理如下:   内容( ...

  5. MyBatis入门学习（三）

    在实际开发中,我们希望文件配置是分类配置存放,需要的时候引入即可.如果多文件的配置混合配置使用,那么对项目的后期维护将增加难度. 一.对于连接数据库的配置单独放在一个properties文件中 1.对 ...

  6. iOS-Objective-C内存管理

    内存管理: 栈区 [stack]:由编译器自动分配并释放,一般存放函数的参数值,局部变量等 堆区 [heap]:由程序员分配和释放,如果程序员不释放,程序结束时,可能会由操作系统回收 全局区(静态区) ...

  7. 开源、免费功能全面的Chart图

    简介: 每个前端都有一个Chart梦,至于真正去做的寥寥无几,无怪乎几个原因: 浏览器兼容问题 数据处理的一些算法,如自动计算坐标轴.自动排列文本等 流畅的动画 丰富的交互功能 去年一年的时间里,我一 ...

  8. 仿Java的AtomicMarkableReference的AtomicMarkablePointer（C++）

    //@author: Zou Xiaohang //@describe: this class is like AtomicMarkableReference which is in java con ...

  9. 使用余弦定理制作磁盘形状h5音乐播放器

    目录 [1]功能实现 [2]效果展示 [3]原理说明 旋转原理 余弦定理 [4]代码实现 HTML CSS JS [5]源码查看 功能实现 [1]歌曲播放进度转换成视觉的旋转角度 [2]点击磁盘任意位 ...

  10. poj3422 Kaka's Matrix Travels(最小费用最大流问题)

    /* poj3422 Kaka's Matrix Travels 不知道 k次 dp做为什么不对??? 看了大牛的代码,才知道还可以这样做! 开始没有理解将a 和 a‘ 之间建立怎样的两条边,导致程序 ...