带进度条的上传（Asp.net+MVC+Uploadify）

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>

时间： 2024-08-01 02:06:04

带进度条的上传（Asp.net+MVC+Uploadify）的相关文章

Ajax带进度条文件上传

Ajax带进度条文件上传 html文件代码: <html> <head> <title>FormData</title> <script type="text/javascript"> /*进度条需要两个最基础的信息------总大小,已上传大小 解决:在html5中有一个上传过程事件,在事件中可以读取这两个信息 ---- onprogress 具体思路: 在上传过程中,不断的触发函数,函数读取已上传/总大小 不断的更新页面的

Springmvc+uploadify实现文件带进度条批量上传

网上看了很多关于文件上传的帖子,众口不一,感觉有点乱,最近正好公司的项目里用到JQuery的uploadify控件做文件上传,所以整理下头绪,搞篇文档出来,供亲们分享. Uploadify控件的主要优势是可以实现批量文件上传,并且提供了onSelect(选中文件).onUploadSuccess(上传成功回调函数)等多个事件监听函数,可以操控上传的整个流程. 对uploadify有个简单的了解后,废话不多说,开始吧... (由于这次项目中用到的是ssm框架,所以就以springmvc的后台处理为

springboot带有进度条的上传

1.pom.xml配置 application.yml server: port: 7007 tomcat: uri-encoding : UTF-8 spring: application: name: push-svc-demo thymeleaf: encoding: UTF-8 cache: false mode: LEGACYHTML5 data: mongodb: host: 127.0.0.1 port: 27017 database: mydb debug: false <par

swupload多图片上传Asp.net MVC

1. 下载WebUploader 2. 将下载到的压缩包里面的文件复制到自己的项目中 3. 添加引用 1 <!--引入Jquery--> 2 <script src="~/Script/jquery-1.8.2.min.js"></script> 3 <!--引入Css--> 4 <link href="~/CSS/webuploader.css" rel="stylesheet" />

头像上传ASP.NET MVC实现-可拖动大小实时预览

这是一个ASP.NET MVC实现的类似于dz论坛的上传头像功能.可以拖动选择大小,支持多种尺寸生成. 效果界面 头像上传源码下载 项目中具体应用时,请根据需求做调整.欢迎交流~回复即可下载~源码下载 提取码 aa5b

Struts2文件上传带进度条，虽然不是很完美

好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下. 首先说一下大概是这样实现的,在我们平时的上传表单里面,除了文件上传之外,也许还有其他的信息需要填写的,这样问题就来了:点击上传按钮之后,这个表单都封装并提交上去了,在上传完成后整个页面就跳转了.而且也不利于我们验证用户输入.很多人这样做的,把这2个操作分开,当然这样也行... 我们这样做:一个普通页面(可以用于填写所有信息的),一个文件上传

asp.net 文件批量选取，批量上传，带进度条，uploadify3.2 TOP

http://www.16aspx.com/Article/3444 asp.net 文件批量选取,批量上传,带进度条,uploadify3.2 TOP,布布扣,bubuko.com

Asp.Net上传大文件带进度条swfupload

Asp.Net基于swfupload上传大文件带进度条百分比显示,漂亮大气上档次,大文件无压力,先看效果 一.上传效果图 1.上传前界面:图片不喜欢可以自己换 2.上传中界面:百分比显示 3.上传后返回文件地址,我测试呢所以乱写的 二.核心代码 upload.htm代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传,避免一次使用内存使用过大的 2 2. Uuid还是原来文件名称:: 2 3. 监听器频繁地被调用 2 4. 结合wz easyui 2 4. 选型 2 5. Uploadify::yash js+flash 3 6. commons-fileupload:: 3 7. COS这个工具O'Reilly公司 3 8. 大的文件上传组件总结 3 5. 林吧实现ui Ajax+jq