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、示例代码附件
jQuery Uploadify在ASP.NET MVC3中的使用的更多相关文章
- jQuery Uploadify在ASP.NET MVC中的使用
感谢http://www.cnblogs.com/libingql/archive/2012/09/11/2681007.html 除此之外,给大家推荐一个: http://gallery.kissy ...
- 使用jQuery Uploadify在ASP.NET 上传附件
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.Uploadify官方网址:http://www.uploadify.com/,在MVC中使用的方法可以参考 jQuer ...
- 在ASP.NET MVC3 中利用Jsonp跨域访问
在ASP.NET MVC3 中利用Jsonp跨域访问 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复 ...
- (转)在ASP.NET MVC3 中利用Jsonp跨域访问
原文地址:http://www.cnblogs.com/skm-blog/p/3431999.html 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用 ...
- 在ASP.NET MVC3 中利用JSONP跨域登录WEB系统
在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复登陆.每次登录都需要输入用户名和密码.最近比较流行的就 ...
- ASP.NET MVC3中Model验证
原文:ASP.NET MVC3中Model验证 概述 上节我们学习了Model的数据在界面之间的传递,但是很多时候,我们在数据传递的时候为了确保数据的有效性,不得不给Model的相关属性做基本的数据验 ...
- Asp.net MVC3 中,动态添加filter
Asp.net MVC3 中,动态添加filter filter是attribute,不支持泛型,传入的参数必须是固定的值.总之很受attribute本身的限制. 发现一篇老外的文章,动态设置filt ...
- Asp.net MVC3中全局图片防盗链
怎么样在Asp.Net MVC3中做到全局图片防盗链?如果熟悉Asp.Net的页面生命周期,相信解决这个问题应该很容易.下面就演示一下如何去做? 一.首先是全局的,我们肯定要在Global.asax文 ...
- ASP.NET MVC3中Controller与View之间的数据传递总结
一. Controller向View传递数据 1. 使用ViewData传递数据 我们在Controller中定义如下: ViewData["Message_ViewData& ...
随机推荐
- 11Java Server Pages 动作
Java Server Pages 动作 JSP标准动作 分类 JSP标准动作 存取JavaBean相关 <jsp:useBean> <jsp:setProperty> < ...
- 16Oracle Database 系统权限和对象权限
Oracle Database 系统权限和对象权限 Oracle中的系统权限和对象权限 DCL 数据控制语言 -- 查看对象的权限 grant / revoke 查看登录用户 Show user 查看 ...
- C: 字符数组中的空去掉
#include <stdio.h> #include <string.h> int main() { char a[50] = "nearby! "; i ...
- [angular2]解决安装 angular-cli 报错:Cannot find module 'github-url-from-git'
1.运行:sudo rm -rf /usr/local/lib/node_modules/npm 2.重新安装最新版本的node,最新版本的node已经集成了npm,所以无需另外安装. 3.运行:su ...
- C++11 Thread多线程的学习心得与问题
C++11 ,封装了thread的多线程的类,这样对多线程的使用更加方便. 多线程的原理我不加赘述,可以参看操作系统等参考书. 多线程代码可以最大化利用计算机性能资源,提高代码的运行效率,是常用优化方 ...
- 洛谷——P2709 小B的询问
P2709 小B的询问 莫队算法,弄两个指针乱搞即可 这应该是基础莫队了吧 $x^2$可以拆成$((x-1)+1)^2$,也就是$(x-1)^2+1^2+2\times (x-1)$,那么如果一个数字 ...
- python whl模块安装方法
搞了半个小时可算是安装上去了 做法 ①先cmd输入Python看一下自己的Python是什么版本的,以及自己的平台,我这里是win32以及python3.6 ②然后去寻找合适的whl,注意cp就是版本 ...
- Openstack manila的一些命令
(本文是测试环境进行的操作:) 1.查看一些信息: [root@openstackcontroller ~]# manila type-list [root@openstackcontroller ~ ...
- PHP 锁机制
应用环境 解决高并发,库存为负数的情况 阻塞模式 如果其他进程已经加锁文件,当前进程会一直等其他进程解锁文件后继续执行 flock($fp, LOCK_EX) // 文件锁 非阻塞模式 如果其他进程已 ...
- 计算机网络篇(前端、HTTP)
全端工程师需知道的计算机网络知识 一.网络篇-http报文详解 1. 分类 请求报文 响应报文 2. 报文结构 (一).请求报文 一个HTTP请求报文由请求行(request line).请求头部(h ...