zoukankan      html  css  js  c++  java
  • 基于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/archive/2012/06/14/2549112.html

  • 相关阅读:
    什么是面向对象(OOP)
    Java虚拟机(JVM)你只要看这一篇就够了!
    ES6中新增的Object.assign()方法详解
    微信小程序_专题_脚本之家(小程序全部知识点)
    微信小程序 生命周期详解
    vue 阻止事件冒泡,捕获方法
    Java必备常见单词
    JS夸页面通信极简方案&纯前端实现文件下载
    vue keep-alive以及activated,deactivated生命周期的用法
    JVM实用参数 内存调优
  • 原文地址:https://www.cnblogs.com/luckjason/p/2549242.html
Copyright © 2011-2022 走看看