简而言之,直接用代码展示如何实现文件的上传,这里需要使用到一个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. Win + D 和 Win + M的区别

    在Windows系统上,Win + D是显示桌面,Win + M是最小化所有窗口,咋一看,这两个快捷键貌似没有区别,但是在某些方面还是有细微的区别. 威力 从威力上来说,Win + D更牛逼一,因为显 ...

  2. 可拖动的DIV

    在做WEB UI设计的时候,拖动某个HTML元素已经成为一种不能忽视的用户界面模式,比较典型的应用例子就是Dialog,一个元素是怎么实现拖动的呢?其实原理非常简单,要想实现首先得了解几个基本知识. ...

  3. xamarin SQLite路径

    xamarin使用SQLite时对应的访问路径各个平台不一样,需要单独引用.在使用前添加SQLite引用包,在解决方案上右击选择解决方案的Nuget管理选项,在浏览中输入sqlite-net-pcl, ...

  4. Java基础之String、StringBuffer、StringBuilder

    1:String类:字符串(重点) (1)多个字符组成的一个序列,叫字符串. 生活中很多数据的描述都采用的是字符串的.而且我们还会对其进行操作. 所以,java就提供了这样的一个类供我们使用. (2) ...

  5. Java中main()的args的知识点浅谈

    我们先来了解下Java中main()方法的默认定义格式: public static void main(String[] args){ }1.main方法是程序执行的入口,除了args这个形参变量可 ...

  6. Atitit usbQb212 oo 面向对象封装的标准化与规范解决方案java c# php js

    Atitit usbQb212 oo 面向对象封装的标准化与规范解决方案java c# php js 1.1. 封装性是面象对象编程中的三大特性之一  三个基本的特性:封装.继承与多态1 1.2. 魔 ...

  7. fir.im Weekly - 可能是 iOS 审核最全面的解决方案

    ipv6 被拒绝,后台定位被拒绝--让很多国内 iOS 开发者心力交瘁.这是一份关于 iOS 审核的终极免费方案,作者iOSWang对最近iOS 审核被拒问题给出了比较全面的方案:Solve-App- ...

  8. web 安全

    一.客户端脚本安全 (1)跨站脚本攻击(XSS): XSS攻击,通常指黑客通过“html注入” 篡改了网页,插入了恶意的脚本,从而在用户浏览网页的时候,控制用户浏览器的一种攻击. 最常见的XSS攻击就 ...

  9. javascript_core_02之函数、作用域

    1.函数:封装一项任务步骤清单的代码段: ①声明:function 函数名(参数列表){ 步骤清单代码:return 返回值:} ②返回值:使调用者获得函数执行结果,return只返回,不保存: ③存 ...

  10. C#打开新页面

    最常用的页面跳转(原窗口被替代):Response.Redirect("XXX.aspx"); 利用url地址打开本地网页或互联网:Respose.Write("< ...