zoukankan      html  css  js  c++  java
  • MVC文件上传

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

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

    1

    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,便可。:

    3

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

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

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

    4

    5

     

  • 相关阅读:
    typescript 箭头表达式
    typescript 参数类型
    ts介绍
    pm2
    koa2安装
    linux 搭建ftp
    CENTOS6.5 安装 mysql5.6 以及搭建双主
    bzoj 3043 (差分序列运用)
    poj 3277 City Horizon
    NOI2015 程序自动分析
  • 原文地址:https://www.cnblogs.com/xmfdsh/p/3988868.html
Copyright © 2011-2022 走看看