C#_uploadify_mvc_version

news/2024/7/5 19:54:14

jQuery Uploadify在ASP.NET MVC3中的使用

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

转载于:https://www.cnblogs.com/MarchThree/p/3802871.html


http://lihuaxi.xjx100.cn/news/248460.html

相关文章

9.matlab中repmat函数

9.matlab中repmat函数

来源&#xff1a; matlab中repmat函数的用法 - CSDN博客 https://blog.csdn.net/anqier1009/article/details/5214978 B repmat(A,m,n) B repmat(A,[m n])B repmat(A,[m n p...]) 这是一个处理大矩阵且内容有重复时使用&#xff0c;其功能是以A的内容堆叠在&#xff08;MxN&…
阅读更多...
shapely使用笔记

shapely使用笔记

1. 头文件 from shapely.geometry import MultiPolygon, GeometryCollection, LinearRing from shapely.ops import cascaded_union, nearest_points from shapely.wkt import loads from shapely.wkt import dumps 2. 点 geometry.Point 常用方法 构造 Point(x, y, z) …
阅读更多...
自我介绍

自我介绍

大家好&#xff0c;我叫蒋继发。这篇文章是我在博客园的第一篇博文&#xff0c;也是我第一次写博客&#xff0c;我希望通过这篇文章让大家了解我&#xff0c;也了解我开博客的目的。 我是一名大学本科二年级学生&#xff0c;论学习成绩来说属于中等偏下的学生。我觉得自己比较叛…
阅读更多...
大叔也说并行和串行`性能提升N倍(N由操作系统位数和cpu核数决定)

大叔也说并行和串行`性能提升N倍(N由操作系统位数和cpu核数决定)

并行是.net4.5主打的技术&#xff0c;同时被封装到了System.Threading.Tasks命名空间下&#xff0c;对外提供了静态类Parallel&#xff0c;我们可以直接使用它的静态方法&#xff0c;它可以并行一个委托数组&#xff0c;或者一个IEnumerable的迭代&#xff0c;而今天主要通过一…
阅读更多...
hdu1305Immediate Decodability(字典树）

hdu1305Immediate Decodability(字典树）

这题看是否 这题能A是侥幸&#xff0c;解决的办法是先存一下输入的字符串&#xff0c;进行排序。 Problem DescriptionAn encoding of a set of symbols is said to be immediately decodable if no code for one symbol is the prefix of a code for another symbol. We will …
阅读更多...
介绍ABC 蜂群算法网站

介绍ABC 蜂群算法网站

来源连接&#xff1a; Artificial Bee Colony (ABC) Algorithm Homepage https://abc.erciyes.edu.tr/software.htm 网站主页如下&#xff1a;通过访问可以获得源代码以及相关的说明 可以通过连接获得代码以及文档&#xff0c;自己觉的很全面
阅读更多...
Python进度条

Python进度条

1. 简介 在日常运行程序的过程中常常涉及到循环迭代过程&#xff0c;对于执行时间很短的程序来说倒无所谓&#xff0c;但对于运行过程有明显耗时的涉及循环迭代的程序&#xff0c;为其加上进度条&#xff08;progress bar&#xff09;&#xff0c;是帮助我们监测代码执行进度以…
阅读更多...
html标签的显示模式（块级标签，行内标签，行内块标签）（转）

html标签的显示模式（块级标签，行内标签，行内块标签）（转）

html标签的显示模式&#xff08;块级标签&#xff0c;行内标签&#xff0c;行内块标签&#xff09; 今天讲课的时候&#xff0c;讲到了html中的标签的显示模式&#xff0c;大致分为块级标签和行内标签。那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用&#x…
阅读更多...
最新文章

Copyright @ 2022~2023