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;加大…
阅读更多...
discuz中又拍云在ie8,chrome22下不能上传的问题

discuz中又拍云在ie8,chrome22下不能上传的问题

chrome22: 解决方法&#xff1a;http://www.baidufe.com/item/b17db6c1136a986b4272.html ie8&#xff1a;flash不能生成 重新安装flash player 14转载于:https://www.cnblogs.com/zhaozhilu/p/3807440.html
阅读更多...
前端学习（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]…
阅读更多...
Oracle 更新Opatch、打补丁

Oracle 更新Opatch、打补丁

1.更新Opatch; 2.打补丁; 3.grid 打补丁; 1.更新Opatch(实验版本:oracle:11.2.0.3.0): 默认安装数据库后,在ORACLE_HOME 下会有个OPatch 文件夹,更新前先检查当前Opatch 版本: 1: [oraclesywu2 OPatch]$ ./opatch lsinventory 2: Invoking OPatch 11.2.0.1.7 3: 4: Ora…
阅读更多...
jQuery学习--选择器的使用

jQuery学习--选择器的使用

jQuery基本选择器1. jQuery的ready事件 -> js的onload2. 选择器的使用1. jQuery的ready事件 -> js的onload 大多是第一种&#xff0c;匿名函数写法 <script type"text/javascript">// 匿名函数写法 ready 开始函数$(function() {// -> js的窗体加载事…
阅读更多...
前端学习（1133）:正则表达式概述

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

阅读更多...
jQuery复选框多选问题

jQuery复选框多选问题

<html><head><title>work.html</title><script type"text/javascript" src"js/jquery-3.2.1.js"> </script><script type"text/javascript">$(function() { // 全选 / 全不选$($("#CheckedAll&…
阅读更多...
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…
阅读更多...
jQuery 属性，css，文档操作

jQuery 属性，css，文档操作

dom对象与jQuery对象的区别 $(function() {// dom 与 jQuery对象间的转换var $txt $(":input");// jQuery -> js// 取下标第0位var txt $txt[0];txt $txt.get(0);console.log(txt.value);txt document.getElementById("in1");// js -> jQuery$tx…
阅读更多...
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 输出样例&#…
阅读更多...
shell之文本过滤（grep）

shell之文本过滤（grep）

shell之文本过滤&#xff08;grep&#xff09; 分类&#xff1a; linux shell脚本学习2012-09-14 14:17 588人阅读 评论(0) 收藏 举报shell正则表达式扩展工具存储grep&#xff08;全局正则表达式版本&#xff09;允许对文本文件进行模式查找。如果找到匹配模式&#xff0c; gr…
阅读更多...
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…
阅读更多...
最新文章

Copyright @ 2022~2023