这次来看下一个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. jQuery读取KindEditor的值

    $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html();

  2. Vuex深入理解

    store下的index.js: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) let store = new Vuex.St ...

  3. Rest-Framework组件源码之认证、频率、权限

    一:使用RestFramwork,定义一个视图 from rest_framework.viewsets import ModelViewSet class BookView(ModelViewSet ...

  4. 45、文件过滤器FilenameFilter

    文件过滤器FilenameFilter JDK中提供了一个FilenameFilter的接口用来实现文件过滤功能,可以使用这个文件过滤器来实现上一节中的问题. File类中有一个带参数的list方法 ...

  5. 苹果手机浏览器$(document).on(“click”,function(){})点击无效的问题

    <label class="js_highlight" style="display: inline-block;float: left;width: 50%;&q ...

  6. spring-boot-单元测试参数数

    简单案例 @RunWith(Parameterized.class) public class ParameterTest { // 2.声明变量存放预期值和测试数据 private String f ...

  7. Multiple HTTPS Bindings IIS 7 Using appcmd

    http://toastergremlin.com/?p=308 Sometimes when using a wildcard SSL or Unified Communications Certi ...

  8. 【Tomcat】Tomcat配置与优化(内存、并发、管理)【自己配置】

    一.JVM内存配置优化 主要通过以下的几个jvm参数来设置堆内存的: -Xmx512m 最大总堆内存,一般设置为物理内存的1/4 -Xms512m 初始总堆内存,一般将它设置的和最大堆内存一样大,这样 ...

  9. oracle11g的冷热备份

    1.冷备份 如果数据库可以正常关闭,而且允许关闭足够长的时间,那么就可以采用冷备份(脱机备份),可以是归档冷备份,也可以是非归档冷备份.其方法是首先关闭数据库,然后备份所有的物理文件,包括数据文件.控 ...

  10. ifdef等宏的妙用

    条件编译 一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一部分内容指定编译的条件,这就是"条件编译". 条件编译命令最常见 ...