基于jquery的上传插件Uploadify 3.1.1在MVC3中的使用-阿里云开发者社区

开发者社区> shy丶gril> 正文

基于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文件夹下。如下图

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

.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;
        }
    }
复制代码

 

上传效果如下:

 用到的上传参数说明

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

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

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

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

 

 

作者:绿茶叶 
出处:http://www.cnblogs.com/greenteaone/ 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SpringMVC 中配置 Swagger 插件.
一、简介  Swagger的目标是为REST API定义一个与语言无关的标准接口,允许用户发现和理解计算机服务的功能,而无需访问源代码。当通过Swagger正确定义时,用户可以用最少量的实现逻辑理解远程服务并与之交互。
1334 0
Python模块Typing.overload的使用
Python模块Typing.overload的使用
11 0
Loadrunner中web_find和web_reg_find函数的使用与区别
总结一下Loadrunner中的检查点函数,主要介绍两个函数:web_find()和web_reg_find();这两个函数均用于内容的查找,但两者也有本质的区别,具体介绍如下:一、web_find()函数该函数的作用是“从HTML页面中查找指定的文本字符串”常用参数及含义如下: 1 web_...
860 0
使用webpack loader加载器
了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载一个coffeescript或者j...
717 0
赞!带进度条的 jQuery 文件拖放上传插件
  jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果。作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 Hack 的方式使之兼容那些古老的浏览器。
790 0
+关注
1878
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载