C#_uploadify_mvc_version

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://www.mzph.cn/news/420831.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

1010 一元多项式求导 (25分)

1010 一元多项式求导 (25分)

输入样例: 3 4 -5 2 6 1 -2 0 输出样例: 12 3 -10 1 6 0 # -*- coding: utf-8 -*-def get_derivation(lst):length len(lst)idx 0while idx < length:if lst[idx 1] ! 0:lst[idx] * lst[idx 1]lst[idx 1] - 1else:lst[idx] 0idx 2return lstif __name__ __main__…
阅读更多...
VS2012 发布网站步骤

VS2012 发布网站步骤

VS2012中发布网站的方式与以往有了不同&#xff0c;前面的版本发布如图 而2012点publish的时候弹出框有所不同&#xff0c;这边需要新建一个profile名字随便起&#xff0c;发布的方式有好几种&#xff0c; 当然不同的方式配置不同&#xff0c;用的最多的就是files system了 选择…
阅读更多...
python 生成个性二维码

python 生成个性二维码

1. 效果 gif 图片二维码 带背景图二维码&#xff08;修改了&#xff09; 2. 依赖库 核心库myqr pip install myqr其它依赖库安装pip install pip install pillow, numpy, imageio3. 核心代码 我这里是F盘下的joy文件夹下面代码改变路径&#xff0c;图片名称参数即可 im…
阅读更多...
1011 A+B 和 C (15分)

1011 A+B 和 C (15分)

输入样例&#xff1a; 4 1 2 3 2 3 4 2147483647 0 2147483646 0 -2147483648 -2147483647 输出样例&#xff1a; Case #1: false Case #2: true Case #3: true Case #4: false # -*- coding: utf-8 -*-if __name__ __main__:n eval(input())input_list []for i in range…
阅读更多...
SharePoint 2013：解决添加域名后每次都需要登录的问题

SharePoint 2013：解决添加域名后每次都需要登录的问题

在SharePoint 2013中&#xff0c;当我们添加一个域名给SP后&#xff08;添加域名的方法请参考此文&#xff1a;http://www.cnblogs.com/jianyus/archive/2013/08/10/3249461.html &#xff09;&#xff0c;每次用域名访问都需要输入用户名和密码&#xff0c;即使该用户已经正确…
阅读更多...
1012 数字分类 (20分)

1012 数字分类 (20分)

输入样例 1&#xff1a; 13 1 2 3 4 5 6 7 8 9 10 20 16 18 输出样例 1&#xff1a; 30 11 2 9.7 9 输入样例 2&#xff1a; 8 1 2 4 5 6 7 9 16 输出样例 2&#xff1a; N 11 2 N 9 # -*- coding: utf-8 -*-def class_numbers(nums):arr [0] * 5exists [0] * 5flag1 1…
阅读更多...
mvc框架upgrade

mvc框架upgrade

upgrade...1. actionservlet核心控制器更改以上1&#xff0c;2点2. 工具类&#xff08;对反射拿到的属性对象数据转型&#xff09;3. 业务服务类使用适配器设计模式针对上一篇文字做出了改造&#xff0c;既然要写手写lowb版mvc框架&#xff0c;就得付出一定代价&#xff0c;加大…
阅读更多...
前端学习（1132）:正则表达式学习目标

前端学习（1132）:正则表达式学习目标

阅读更多...
1013 数素数 (20分)

1013 数素数 (20分)

输入样例&#xff1a; 5 27 输出样例&#xff1a; 11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71 73 79 83 89 97 101 103 # -*- encoding: utf-8 -*- import mathdef get_primes(n):prime_list [1] * (n 1)for i in range(2, int(math.sqrt(n)) 1):if prime_list[i]…
阅读更多...
前端学习（1133）:正则表达式概述

前端学习（1133）:正则表达式概述

阅读更多...
1014 福尔摩斯的约会 (20分)

1014 福尔摩斯的约会 (20分)

输入样例&#xff1a; 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm 输出样例&#xff1a; THU 14:04 # -*- coding: utf-8 -*- import stringweek {A: MON,B: TUE,C: WED,D: THU,E: FRI,F: SAT,G: SUN}hour {0:00, 1:01, 2:02, 3:03, 4:04, 5:05, 6:0…
阅读更多...
MSSQL如何在没有主键的表中删除重复数据

MSSQL如何在没有主键的表中删除重复数据

MSSQL如何在没有主键的表中删除重复数据 原文:MSSQL如何在没有主键的表中删除重复数据为了对重复数据进行实验&#xff0c;下面建一个设计不太好&#xff08;没有主键&#xff09;表并插入了一些重复数据&#xff1a; create database testdbuse testdb ; go create table Dups…
阅读更多...
1015 德才论 (25分)

1015 德才论 (25分)

输入样例&#xff1a; 14 60 80 10000001 64 90 10000002 90 60 10000011 85 80 10000003 85 80 10000004 80 85 10000005 82 77 10000006 83 76 10000007 90 78 10000008 75 79 10000009 59 90 10000010 88 45 10000012 80 100 10000013 90 99 10000014 66 60 输出样例&#…
阅读更多...
1016 部分A+B (15分)

1016 部分A+B (15分)

输入样例 1&#xff1a; 3862767 6 13530293 3 输出样例 1&#xff1a; 399 输入样例 2&#xff1a; 3862767 1 13530293 8 输出样例 2&#xff1a; 0 # -*- coding: utf-8 -*-if __name__ __main__:input_list input().split()a, d_a, b, d_b input_list[0], input_li…
阅读更多...
马哥学习笔记二十七——IO复用

马哥学习笔记二十七——IO复用

I/O动作模式　　阻塞 非阻塞 I/O复用 信号驱动 异步 转载于:https://www.cnblogs.com/wangyongbin/p/3817353.html
阅读更多...
1017 A除以B (20分)

1017 A除以B (20分)

输入样例&#xff1a; 123456789050987654321 7 输出样例&#xff1a; 17636684150141093474 3 # -*- coding: utf-8 -*- import redef big_division(a, b):q_list, r [], 0len_a len(a)for i in range(0, len_a):dividend 10 * r eval(a[i])q_list.append(dividend // …
阅读更多...
Idea创建web项目，配置tomcat服务器

Idea创建web项目，配置tomcat服务器

使用idea创建web项目 新下载的idea&#xff0c;需要启用插件&#xff0c;才可创建web项目 启用Java ee&#xff0c;servlet有web项目选项 创建项目 选好jdk&#xff0c;要配置好jdk环境变量https://blog.csdn.net/crossing2012/article/details/81292547 选路径 to…
阅读更多...
前端学习（1138）:正则表达式里面的量词符

前端学习（1138）:正则表达式里面的量词符

阅读更多...
CSS 最核心的几个概念

CSS 最核心的几个概念

本文将讲述 CSS 中最核心的几个概念&#xff0c;包含&#xff1a;盒模型、position、float等。这些是 CSS 的基础&#xff0c;也是最经常使用的几个属性&#xff0c;它们之间看似独立却又相辅相成。为了掌握它们&#xff0c;有必要写出来探讨一下&#xff0c;如有错误欢迎指正。…
阅读更多...
1018 锤子剪刀布 (20分)

1018 锤子剪刀布 (20分)

输入样例&#xff1a; 10 C J J B C B B B B C C C C B J B B C J J 输出样例&#xff1a; 5 3 2 2 3 5 B B 本题有几个地方需要注意&#xff1a; 当甲乙没有赢&#xff0c;怎么输出&#xff0c;正确答案是都输出B&#xff0c;这个在题目中找不出线索&#xff0c;有点坑&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023