最近做项目用到了上传图片的功能，以前也写过这类代码，不过都是用传统的file标签，今天整理一个好用的插件Uploadify。。都做了一些注释，一看便知。
可以去官网下载最新的：Uploadify下载地址：http://www.uploadify.com/download/
1.引用文件
<link href="@Url.Content("~/Scripts/uploadify/uploadify.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4..min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/uploadify/jquery.uploadify.min.js")" type="text/javascript"></script>
2.页面文件
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Header{
<link href="@Url.Content("~/Scripts/uploadify/uploadify.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4..min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/uploadify/jquery.uploadify.min.js")" type="text/javascript"></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>
<span id="uploadify"></span>
</div>
<div>
<button onclick="javascript:$('#uploadify').uploadify('upload','*');">上传队列</button>
<button onclick="javascript:$('#uploadify').uploadify('cancel', '*');">取消队列</button>
</div>
@*<div id="uploadfileQueue" style="margin-top:100px;">
</div>*@
<script type="text/javascript">
$(function () {
$('#uploadify').uploadify({
debug: false, //开启调试
successTimeout: , //超时时间
formData: { //附带值
'userid': '用户id',
'username': '用户名',
'rnd': '加密密文'
},
//queueID: 'uploadfileQueue', //文件选择后的容器ID
uploader: '/Home/Upload', // 服务器端处理地址
swf: '@Url.Content("~/Scripts/uploadify/uploadify.swf")', // 上传使用的 Flash
width: , // 按钮的宽度
height: , // 按钮的高度
buttonText: "请选择上传的文件", // 按钮上的文字
buttonCursor: 'hand', // 按钮的鼠标图标
fileObjName: 'Filedata', // 上传参数名称
// 两个配套使用
fileTypeExts: "*.jpg;*.png", // 扩展名
fileTypeDesc: "请选择 jpg png 文件", // 文件说明
auto: false, // 选择之后，自动开始上传
multi: true, // 是否支持同时上传多个文件
queueSizeLimit: , //设置上传队列中同时允许的上传文件数量 允许多文件上传的时候，同时上传文件的个数
//uploadLimit：设置允许上传的文件数量，默认为999。
removeCompleted: false, //设置已完成上传的文件是否从队列中移除，默认为true
onQueueComplete: function (queueData) {//队列中全部文件上传完成时触发事件。
alert(queueData.uploadsSuccessful + '个文件上传完成');
},
//返回一个错误，选择文件的时候触发
onSelectError:function(file, errorCode, errorMsg){
switch(errorCode) {
case -:
alert("上传的文件数量已经超出系统限制的" + $('#uploadify').uploadify('settings', 'queueSizeLimit') + "个文件！");
break;
case -:
alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#uploadify').uploadify('settings', 'fileSizeLimit') + "大小！");
break;
case -:
alert("文件 ["+file.name+"] 大小异常！");
break;
case -:
alert("文件 ["+file.name+"] 类型不正确！");
break;
}
},
onFallback:function(){
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。"); //检测FLASH失败调用
},
onUploadSuccess: function (file, data, response) { //上传到服务器，服务器返回相应信息到data里
alert(data);
}
});
});
</script>
页面视图
3.控制器方法
public ActionResult Upload(HttpPostedFileBase fileData, string formData)
{
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);
}
}
控制器方法
最后：效果图
源码下载地址：http://files.cnblogs.com/itxiaoyan2013/UploadFile.zip