jQuery Uploadify在ASP.NET MVC3中的使用

最新推荐文章于 2022-04-19 22:30:32 发布
最新推荐文章于 2022-04-19 22:30:32 发布
阅读量416 收藏
点赞数
分类专栏： jquery javascript 文件上传 uploadify 文章标签： uploadify
jquery 同时被 3 个专栏收录
25 篇文章 0 订阅
订阅专栏
javascript
16 篇文章 0 订阅
订阅专栏
文件上传
4 篇文章 0 订阅
订阅专栏

1、Uploadify简介

        Uploadify是基于jQuery的一种上传插件，支持多文件、带进度条显示上传，在项目开发中常被使用。

        Uploadify官方网址：http://www.uploadify.com/

 

2、ASP.NET MVC3中的使用Uploadify

       搭建ASP.NET MVC3解决方案如下图，其中使用到的Uploadify为3.1版本：

 

　　1>、简单示例

      _Layout.cshtml代码：

复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    @RenderSection("Header")
</head>

<body>
    @RenderBody()
</body>
</html>
复制代码

      Index.cshtml代码：

复制代码 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Header{
    <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#file_upload').uploadify({
                'swf'        : '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
                'uploader'   : '/Home/Upload'
            });
        });
    </script>
    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        .tip
        {
            height: 20px;
            border-bottom: 1px solid #CCC;
            margin-bottom: 10px;
        }
    </style>
}
<div class="tip">
    jQuey Uploadify上传文件示例：
</div>
<input type="file" id="file_upload" name="file_upload" />
复制代码

        HomeController.cs代码:

复制代码 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using System.IO;

namespace WebUI.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult Upload(HttpPostedFileBase fileData)
        {
            if (fileData != null)
            {
                try
                {
                    // 文件上传后的保存路径
                    string filePath = Server.MapPath("~/Uploads/");
                    if (!Directory.Exists(filePath))
                    {
                        Directory.CreateDirectory(filePath);
                    }
                    string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
                    string fileExtension = Path.GetExtension(fileName); // 文件扩展名
                    string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称

                    fileData.SaveAs(filePath + saveName);

                    return Json(new { Success = true, FileName = fileName, SaveName = saveName });
                }
                catch (Exception ex)
                {
                    return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
                }
            }
            else
            {

                return Json(new { Success = false, Message = "请选择要上传的文件！" }, JsonRequestBehavior.AllowGet);
            }
        }
    }
}
复制代码

        上传效果图：

 

        2>、设置上传图片大小

        ASP.NET MVC默认情况下，允许上传的文件大小最大为4MB。因此在默认情况下，Uploadify也只能最大上传4MB大小的文件，超过范围则会IO报错提示无法上传。

        修改Web.config设置允许上传的最大文件大小：

<system.web>
　　<!--设置最大允许上传文件大小1G-->
　　<httpRuntime maxRequestLength= "102400" executionTimeout= "60" />
</system.web>

　　修改最大上传文件大小后效果：

        3>、Uploadify常用属性设置

        auto：是否选择文件后自动上传，默认为true。

复制代码 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Header{
    <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#file_upload').uploadify({
                'auto'       : false,
                'swf'        : '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
                'uploader'   : '/Home/Upload'
            });
        });
    </script>
    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        .tip
        {
            height: 20px;
            border-bottom: 1px solid #CCC;
            margin-bottom: 10px;
        }
    </style>
}
<div class="tip">
    jQuey Uploadify上传文件示例：
</div>
<div>
    <input type="file" id="file_upload" name="file_upload" />
</div>
<div>
    <a href="javascript:$('#file_upload').uploadify('upload');">上传</a>
</div>
复制代码

 

        buttonText：设置上传按钮显示文字。

复制代码 
<script type="text/javascript">
    $(function () {
        $('#file_upload').uploadify({
            'buttonText'       : '请选择上传文件',
            'swf'        : '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
            'uploader'   : '/Home/Upload'
        });
    });
</script>
复制代码

 

        buttonImage：设置上传按钮背景图片。

复制代码 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Header{
    <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#file_upload').uploadify({
                'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
                'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
                'uploader': '/Home/Upload'
            });
        });
    </script>
    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        .tip
        {
            height: 20px;
            border-bottom: 1px solid #CCC;
            margin-bottom: 10px;
        }
        .uploadify-button
        {
            background-color: transparent;
            border: none;
            padding: 0;
        }
        .uploadify:hover .uploadify-button
        {
            background-color: transparent;
        }
    </style>
}
<div class="tip">
    jQuey Uploadify上传文件示例：
</div>
<div>
    <input type="file" id="file_upload" name="file_upload" />
</div>
复制代码

 

        multi：是否允许一次选择多个文件一起上传，默认为true。

复制代码 
<script type="text/javascript">
    $(function () {
        $('#file_upload').uploadify({
            'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
            multi: true,
            'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
            'uploader': '/Home/Upload'
        });
    });
</script>
复制代码

         fileTypeDesc：设置允许上传图片格式描述；

         fileTypeExts：设置允许上传图片格式。

复制代码 
<script type="text/javascript">
    $(function () {
        $('#file_upload').uploadify({
            'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
            'fileTypeDesc': '图片文件',
            'fileTypeExts': '*.gif; *.jpg; *.png', 
            'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
            'uploader': '/Home/Upload'
        });
    });
</script>
复制代码

 

        removeCompleted：设置已完成上传的文件是否从队列中移除，默认为true。

复制代码 
$(function() {
    $("#file_upload").uploadify({
        'removeCompleted' : false,
        'swf'             : '/uploadify/uploadify.swf',
        'uploader'        : '/uploadify/uploadify.php'
    });
});
复制代码

        queueSizeLimit：设置上传队列中同时允许的上传文件数量，默认为999。

复制代码 
$(function() {
    $("#file_upload").uploadify({
        'queueSizeLimit' : 1,
        'swf'            : '/uploadify/uploadify.swf',
        'uploader'       : '/uploadify/uploadify.php'
    });
});
复制代码

       uploadLimit：设置允许上传的文件数量，默认为999。

复制代码 
$(function() {
    $("#file_upload").uploadify({
        'swf'         : '/uploadify/uploadify.swf',
        'uploader'    : '/uploadify/uploadify.php',
        'uploadLimit' : 1
    });
});
复制代码

 

        4>、Uploadify常用事件设置

        onUploadComplete:单个文件上传完成时触发事件。

复制代码 
$(function() {
    $("#file_upload").uploadify({
        'swf'              : '/uploadify/uploadify.swf',
        'uploader'         : '/uploadify/uploadify.php',
        'onUploadComplete' : function(file) {
            alert('The file ' + file.name + ' finished processing.');
        }
    });
});
复制代码

        onQueueComplete：队列中全部文件上传完成时触发事件。

复制代码 
$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onQueueComplete' : function(queueData) {
            alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
        }
    });
});
复制代码

        onUploadSuccess：单个文件上传成功后触发事件。

复制代码 
<script type="text/javascript">
    $(function () {
        $('#file_upload').uploadify({
            'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
            'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
            'uploader': '/Home/Upload',
            'onUploadSuccess': function (file, data, response) {
                eval("data=" + data);
                alert('文件 ' + file.name + ' 已经上传成功，并返回 ' + response + ' 保存文件名称为 ' + data.SaveName);
            }
        });
    });
</script>
复制代码

        4>、Uploadify常用方法

         upload：上传文件

         cancel：取消上传

复制代码 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Header{
    <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#file_upload').uploadify({
                'auto'         : false,
                'buttonImage'  : '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
                'swf'          : '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
                'uploader'     : '/Home/Upload'
            });
        });
    </script>
    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        .tip
        {
            height: 20px;
            border-bottom: 1px solid #CCC;
            margin-bottom: 10px;
        }
        .uploadify-button
        {
            background-color: transparent;
            border: none;
            padding: 0;
        }
        .uploadify:hover .uploadify-button
        {
            background-color: transparent;
        }
    </style>
}
<div class="tip">
    jQuey Uploadify上传文件示例：
</div>
<div>
    <input type="file" id="file_upload" name="file_upload" />
</div>
<div>
    <a href="javascript:$('#file_upload').uploadify('upload');">上传第一个</a>
    <a href="javascript:$('#file_upload').uploadify('upload','*');">上传队列</a> 
    <a href="javascript:$('#file_upload').uploadify('cancel');">取消第一个</a>
    <a href="javascript:$('#file_upload').uploadify('cancel', '*');">取消队列</a>
</div>
复制代码

 

3、示例代码附件

jQueryUploadifyDemo.rar

kylin-v
关注
专栏目录
AspNet中使用JQuery上传插件Uploadify详解
10-24
Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用
ASP.NET MVC 4 中Jquery上传插件Uploadify简单使用-版本:3.2.1
weixin_30412577的博客
09-14 155
1.官网下载开发包：http://www.uploadify.com/download/，选择免费的Flash版本： 2.解压后，需要用到以下几个文件： 需要修改uploadify.css中取消上传按钮的背景图片路径： .uploadify-queue-item .cancel a { background: url('../img/uploadify-cancel.p...
在MVC中使用Uploadify
snowalkmount的专栏
04-18 859
一、Uploadify控件       在ASP.NET中上传的控件有很多，比如.NET自带的FileUpload，以及SWFUpload，Uploadify等等，尤其后面两个控件的用户体验比较好，无刷新，带上传进度等等。在最近的一个webform开发项目中，我就是使用的Uploadify，虽然有些小瑕疵，但是基本上还是满意的（在webform中使用Uploadify可以参考《JQuery上
MVC4+Jquery对话框中使用Uploadify上传文件
smileqiuqiu的专栏
12-18 1899
http://www.uploadify.com/download/ 可以下载最新的uploadify插件，最新的版本为3.2.1 uploadify中可提前判断文件的大小，也能检测文件类型，解决了纯js在ie8下除非用ActiveXObject才能获取文件的大小的问题     var fileobject = new ActiveXObject("Scripting.FileSystemOb
asp.net mvc uploadify v3.2.1 使用方法(二)
05-31
在本教程中，我们将深入探讨如何在ASP.NET MVC项目中集成Uploadify v3.2.1，以实现高效且友好的文件上传界面。 首先，我们需要在项目中引入Uploadify。你可以从其官方网站或者第三方资源网站下载v3.2.1版本的压缩包...
asp.net使用jQuery Uploadify上传附件示例
01-01
Uploadify官方网址：http://www.uploadify.com/，在MVC中使用的方法可以参考 jQuery Uploadify在ASP.NET MVC3中的使用 和 Asp.net Mvc中使用uploadify实现图片缩放保存。 本文是一个简单的介绍Demo，主要是动态传递...
【ASP.NET编程知识】ASP.NET MVC4 利用uploadify.js多文件上传.docx
最新发布
05-16
在 ASP.NET MVC4 中使用 uploadify.js 实现多文件上传，需要引入相关的 JavaScript 文件和 CSS 文件，例如 uploadify.js、uploadify.css 等。在 View 中，需要添加一个表单，用于上传文件，并添加一个按钮，用于触发...
ASP.NET MVC中jQuery Uploadify组件上传实战与封装
通过以上步骤，jQuery.uploadify组件就可以在ASP.NET MVC项目中实现文件上传，提升用户体验，并简化前端与后端之间的交互。同时，可以根据具体项目需求调整封装代码，确保与项目的整体架构无缝集成。
ASP.NET MVC中使用jQuery.uploadify文件上传组件教程
这个组件广泛应用于各种Web开发框架中，包括ASP.NET MVC。在本文中，我们将深入探讨jQuery.uploadify的使用方法和实例。 1、jQuery.uploadify简介 jQuery.uploadify不仅提供基本的文件上传功能，还包括了错误处理、...
MVC JQuery uploadIfy 批量上传并写入数据库信息
07-26
MVC JQuery uploadIfy 批量上传并写入数据库信息
asp.net(c#)开发中的文件上传组件uploadify的使用方法（带进度条）
07-09
Uploadify是JQuery的一个上传插件，带进度显示, 支持多文件上传。不过官方提供的实例时php版本的. 【官网上flash-based是免费的，html5版本是收费的5美金】 附件提供的是asp.net(C#)实例，免费和大家一起共享。讨论学习。
ASP.NET MVC Uploadify和plupload上传文件.zip
08-17
这次测试使用ASP.NET MVC开发，demo中写了分别用Uploadify和plupload插件上传文件的方法，第一种Uploadify插件有一个问题：谷歌浏览器不兼容，其他浏览器都ok，第二种plupload插件完美兼容我测试过的所有浏览器（ie、360、Chrome）。所以我个人推荐使用第二种plupload插件实现上传文件。
一个完整net C# MVC项目
01-25
一个完整项目 C# mvc 前台 后台 数据库 上传文件 bootstrapt jquery ui 分页等等基本操作 都有
ASP.NET MVC使用Uploadify上传文件
郑林的专栏
11-18 5071
在VS2010中通过ASP.NET MVC使用uploadify上传文件
C#_MVC详细
GS7777的博客
08-01 614
1:工具类如何写一个增删改的方法? public static bool ExecuteQuery（string sql，SqlParameter [] parameters） { SqlConnection conn=new SqlConnection（ConnString）； try { conn.Open(); SqlCommand comm=new SqlCommand(sq...
C# MVC技术快速突破
hyyjiushiliangxing的博客
04-19 467
网站运行原理 2. .NET Framework 包括两部分内容 3 . ASP.NET-MVC原理理解 App_Data:用来保存数据文件，比如XML文件等 App_start: 包含MVC启动的相关类，FilterConfig(过滤器)、RouteConfig（路由）、WebApiConfig Controller：存放整个项目的控制器代码文件 Models：存放整个项目的模型代码文件 VIew：存放整个项目的视图代码文件，其中VIew下的web.config...
c# asp.net mvc4 使用uploadify插件实现上传功能
abc_4567890的博客
04-26 190
【1】首先去官网下载插件：http://www.uploadify.com/download/。ww我使用的是免费的，基于flash的版本。因为基于H5的版本需付费使用，然后使用该插件也就是做做毕设网站，所以就不讲究了。 【2】接下来在view中引用uploadify的js与css文件，再配置uploadify。注意，这里的路径随着你程序中uploadify文件的位置改变而改变。我是...
JQuery Uploadify在Asp.net中的实现与教程
本文主要介绍了如何在ASP.NET环境中使用jQuery Uploadify插件实现文件上传功能。Uploadify是一个功能强大的JavaScript插件，它结合了jQuery，提供了文件上传的交互性和进度显示，非常适合在Web应用中增强用户体验。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值