基于jquery的上传插件Uploadify 3.1.1在MVC3中的使用

Uploadify是JQuery的一个文件上传插件,实现的效果非常不错,目前已经更新到Version3.1.1,官方提供的实例是php版本的,本文将介绍Uploadify在MVC3中的使用,您可以点击以下链接,去官网查看文档,下载Uploadify插件。

下载Uploadify插件,然后按照以下步骤,在MVC3中应用Uploadify3.1.1插件的上传功能吧。

1.创建MVC3工程,本例命名为UploadifyTest

2.把解压后的Uploadify-v3.1文件夹Copy到工程中的Scripts文件夹下。如下图

基于jquery的上传插件Uploadify 3.1.1在MVC3中的使用

以上步骤做完以后,开始写代码了。

.cshtml文件中的代码如下:

复制代码

<link href="/Scripts/uploadify-v3.1/uploadify.css" rel="stylesheet" type="text/css" />

<script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script>

<script type="text/javascript" src="/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js"></script>

<script type="text/javascript">

    $(function () {

        $('#upload').uploadify({

            'formData': { 'folder': 'd:\\' },

            'buttonText': '选择文件',

            'buttonClass': 'browser',

            'removeCompleted': false,

            'swf': '/Scripts/uploadify-v3.1/uploadify.swf',

            'uploader': '/Home/Upload'



        });

    });

</script>

<head>

    <style type="text/css">

        .browser

        {

            color:White;

        }

    </style>

</head>

<input type="file" name="upload" id="upload" />

复制代码

cs文件代码如下:

复制代码

public class HomeController : Controller {

        public ActionResult Index() {

            return View();

        }

        [AcceptVerbs(HttpVerbs.Post)]

        public ContentResult Upload(HttpPostedFileBase FileData, string folder) {

            string filename = "";

            if (null != FileData) {

                try {

                    filename = Path.GetFileName(FileData.FileName);//获得文件名

                    string fullPathname = Path.Combine(folder, filename);

                    saveFile(FileData, folder, filename);

                } catch (Exception ex) {

                    filename = ex.ToString();

                }

            }

            return Content(filename);

        }



        [NonAction]

        private bool saveFile(HttpPostedFileBase postedFile, string filepath, string saveName) {

            bool result = false;

            if (!Directory.Exists(filepath)) {

                Directory.CreateDirectory(filepath);

            }

            try {

                postedFile.SaveAs(Path.Combine(filepath, saveName));

                result = true;

            } catch (Exception e) {

                throw new ApplicationException(e.Message);

            }

            return result;

        }

    }

复制代码

上传效果如下:

基于jquery的上传插件Uploadify 3.1.1在MVC3中的使用

用到的上传参数说明

'formData': 向后台传递的参数

'buttonText': 上传按钮上显示的文字

'buttonClass': 给上传按钮添加的

class'removeCompleted': 表示在上传完成后是否删除队列中的对应元素。默认是True,即上传完成后就看不到上传文件进度条了。
'swf': swf文件路径
'uploader': 调用后台操作的方法

转自 http://www.cnblogs.com/greenteaone/archive/2012/06/14/2549112.html

你可能感兴趣的:(uploadify)