基于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': 调用后台操作的方法

 

 

posted @   绿茶叶  阅读(6944)  评论(24)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae