这次来看下一个MVC网站上传文件的功能,其中上传用到uploadify这个jquery插件,网上还有很多类似的,哪种都无所谓,能实现功能便行,貌似uploadify官网上的这个插件是要付费的,这里就顺便提供这个插件的下载地址如下:http://files.cnblogs.com/xmfdsh/uploadify3.2.zip

首先创建一个MVC的网站,新建一个文件夹名称为UpLoadiFy(这里可以随便起名称),来存放uploadify这个插件需要用到的js,css以及flash文件。如下图:

Home控制器有两个方法,Index和一个上传时插件传入的UpLoadFile方法。如下:

public ActionResult Index()
{
return View();
} [HttpPost]
public ContentResult UpLoadFile(HttpPostedFileBase fileData)
{
if (fileData != null && fileData.ContentLength > )
{
string fileSave = Server.MapPath("~/UpLoad/");
//获取文件的扩展名
string extName = Path.GetExtension(fileData.FileName);
//得到一个新的文件名称
string newName = Guid.NewGuid().ToString() + extName;
fileData.SaveAs(Path.Combine(fileSave, newName));
}
return Content("");
}

至于前台的话就只需要引用jquery的js和对应插件的js,css,便可。:

至于<script></script>里面的代码就如下了,通过初始化来实现上传功能,至于里面的参数可以去google一下uploadify这个插件的相关参数,下面的代码也注释了一下主要参数的作用。

<script type="text/javascript">
$(function () {
$('#Filedata').uploadify({
fileObjName: 'Filedata',
uploader: '/Home/UpLoadFile', // 服务器端处理地址
swf: '/UpLoadiFy/uploadify.swf', // 上传使用的 Flash
width: 60, // 按钮的宽度
height: 23, // 按钮的高度
buttonText: "上传", // 按钮上的文字
buttonCursor: 'hand', // 按钮的鼠标图标
fileObjName: 'Filedata', // 上传参数名称
// 两个配套使用
fileTypeExts: "*.jpg;*.png", // 扩展名,限制扩展名,可按照自己想要的来设置
fileTypeDesc: "请选择 jpg png 文件", // 文件说明
auto: true, // 选择之后,自动开始上传
multi: true, // 是否支持同时上传多个文件
queueSizeLimit: 5 // 允许多文件上传的时候,同时上传文件的个数
});
});
</script>

这样便搞定了整个基本上传的功能,从前台的jquery插件选择了文件后,便会把这个文件的相关信息传入都控制器后台的UpLoadFile方法,然后再保存起来到指定的路径,如上面的代码我保存的是("~/UpLoad/");这个路径。运行效果如下:

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

  1. MVC文件上传-使用jQuery.FileUpload和Backload组件实现文件上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: 处理文件上传的服务端组件Backload 用于处理文件上传的服务端组件 ...

  2. ASP.NET MVC 文件上传和路径处理

    ASP.NET MVC 文件上传和路径处理总结 目录 文件的上传和路径处理必须解决下面列出的实际问题: 1.重复文件处理 2.单独文件上传 3.编辑器中文件上传 4.处理文章中的图片路径 5.处理上传 ...

  3. MVC文件上传与下载

    MVC文件上传与下载 MVC文件上传与下载 想想自己从毕业到工作也有一年多,以前公司的任务的比较重,项目中有的时候需要用到什么东西都去搜索一下,基础知识感觉还没有以前在学校中的好.最近开始写博客,真的 ...

  4. Spring MVC 笔记 —— Spring MVC 文件上传

    文件上传 配置MultipartResolver <bean id="multipartResolver" class="org.springframework.w ...

  5. MVC文件上传09-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹,并在其中创建分类子文件夹

    为用户创建专属上传文件夹后,如果想在其中再创建分类子文件夹,该怎么做?可以在提交文件的视图中再添加一个隐藏域,并设置 name="uploadContext". 相关兄弟篇: MV ...

  6. MVC文件上传08-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹

    当需要为每个用户建立一个专属上传文件夹的时候,可以在提交文件的视图中添加一个隐藏域,并设置name="objectContext". 相关兄弟篇: MVC文件上传01-使用jque ...

  7. MVC文件上传07-使用客户端jQuery-File-Upload插件和服务端Backload组件裁剪上传图片

    本篇通过在配置文件中设置,对上传图片修剪后保存到指定文件夹. 相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  MVC文件上传02-使用HttpPostedFileB ...

  8. MVC文件上传06-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义控制器上传多个文件

    当需要在控制器中处理除了文件的其他表单字段,执行控制器独有的业务逻辑......等等,这时候我们可以自定义控制器. MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证 ...

  9. MVC文件上传05-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义上传文件夹

    在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  MVC文 ...

  10. MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  ...

随机推荐

  1. go语言从零学起(二)--list循环删除元素(转载)

    本篇系转载 在使用go的container/list的package时,你可能会无意间踩一个小坑,那就是list的循环删除元素. list删除元素,直观写下来的代码如下: package main i ...

  2. 开始 Dojo 开发

    原文出处:Joe Lennon 从头开始学习 Dojo,第 1 部分 开始 Dojo 开发 Dojo Toolkit 简介 Dojo 于 2004 年创建,使开发 DHTML 和 JavaScript ...

  3. 即时通信系统Openfire分析之二:主干程序分析

    引言 宇宙大爆炸,于是开始了万物生衍,从一个连人渣都还没有的时代,一步步进化到如今的花花世界. 然而沧海桑田,一百多亿年过去了…. 好复杂,但程序就简单多了,main()函数运行,敲个回车,一行Hel ...

  4. 详解tomcat连接数和线程数

    前言 在使用tomcat时,经常会遇到连接数.线程数之类的配置问题,要真正理解这些概念,必须先了解Tomcat的连接器(Connector). 在前面的文章 详解Tomcat配置文件server.xm ...

  5. jQuery.Validator Sample

    <!DOCTYPE html> <html> <head> <title></title> <script src="./j ...

  6. soj1090.Highways

    1090. Highways Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description The island nation of ...

  7. 你对position的了解到底有多少?

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  8. 通过微信公众号ID生成公众号的二维码

    username为公众号id http://open.weixin.qq.com/qr/code/?username=wyjiaolian

  9. BZOJ4816 数字表格

    4816: [Sdoi2017]数字表格 Time Limit: 50 Sec  Memory Limit: 128 MB Description Doris刚刚学习了fibonacci数列.用f[i ...

  10. js_模块化

    https://www.cnblogs.com/scq000/p/10647128.html