MVC文件上传

浏览数：16 / 时间：2015年06月09日

这次来看下一个MVC网站上传文件的功能，其中上传用到uploadify这个jquery插件，网上还有很多类似的，哪种都无所谓，能实现功能便行，貌似uploadify官网上的这个插件是要付费的，这里就顺便提供这个插件的下载地址如下：

首先创建一个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 > 0)
            {
                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>