开发者社区> shy丶gril> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

基于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 

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

相关文章
推荐40个简单的 jQuery 导航插件和教程【下篇】
  在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程。导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多的内容。
654 0
精心挑选的12款优秀 jQuery Ajax 分页插件和教程
  在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1057 0
分享精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了20个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1098 0
精心挑选的15款优秀 jQuery 文本特效插件和教程
  今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程。jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果。
1070 0
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互。下面向大家分享8个优秀的 jQuery倒计时插件和教程。 jQuery Countdown spriteTimer php ajax/jque...
795 0
10个实用的jQuery交互/通信插件和教程
在网站或应用程序中添加交互或通信功能,可以为用户带来非常棒的使用体验。本文整理了10个非常实用的jQuery插件和教程,可以帮助你在网站或应用中整合交互或通信功能,如新闻预览、显示最近日志的小部件、友情链接侧边栏等。
1005 0
20+ 个很棒的 jQuery 文件上传插件或教程
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。
2221 0
12 月份 10 个新鲜的 jQuery 插件和教程
1. MASHA (Mark & Share) MASHA (Mark & Share 的缩写) 是一个可以让你分享网页部分内容的 JavaScript 库。 2. JScraft scroller 通过点击某个图片,该图将移到网页中央,其他相应的图片进行位置滑动。
703 0
20+ 个有用的 Google 地图的 jQuery 插件和教程
gMap – Google Maps Plugin For jQuery bMap – jQuery Plugin $.goMap – google maps jQuery plugin qmap3 – A jQuery plugin to use google maps vers...
900 0
40款非常棒的 jQuery 插件和制作教程(系列二)
  jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。
974 0
+关注
1876
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载