ASP.NET MVC 使用zyUpload插件实现多图上传 讲解+源码
1、zyUpload归根结底是使用H5的新特性实现多图上传的 <input type="file" multiple />，在ASP.NET Webform中我们可以请求ashx文件，通过获取HttpContext获取上传的文件流信息，而在MVC中，我们通过Controller就可以获取到这些数据。
2、网络下载的zyUpload 静态案例 下载地址 zyUpload 静态文件资源
实现效果如下：
Step1:默认界面：
Step2:选择图片
Step3:单击开始上传，提示上传成功（上传成功信息Console）
Step4:上传的服务端目录
Demo下载地址：ASP.NET MVC 使用zyUpload插件实现多图上传源码
具体实现代码：
前端 引用各个zyUpload各文件，直接把zyUpload 静态案例中的内容拷贝到项目内，并引用到需要实现上传的页面：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ASP.NET MVC 使用zyUpload插件进行多图示例</title>
<!-- 引用控制层插件样式 -->
<link href="~/Content/control/css/zyUpload.css" rel="stylesheet" />
<script src="~/Content/jquery-1.7.2.js"></script>
<!-- 引用核心层插件 -->
<script src="~/Content/core/zyFile.js"></script>
<!-- 引用控制层插件 -->
<script src="~/Content/control/js/zyUpload.js"></script>
<!-- 引用初始化JS -->
<script src="~/Content/demo.js"></script>
</head>
<body>
<h1 style="text-align:center;">ASP.NET MVC 使用zyUpload插件进行多图示例</h1>
<div id="demo" class="demo"></div>
</body>
</html>
JS需要修改 demo.js 中的Url，改为请求后台的路径即可
$(function(){
// 初始化插件
$("#demo").zyUpload({
width : "650px", // 宽度
height : "400px", // 宽度
itemWidth : "120px", // 文件项的宽度
itemHeight : "100px", // 文件项的高度
url : "/Home/UploadPicture", // 上传文件的路径
multiple : true, // 是否可以多个文件上传
dragDrop : true, // 是否可以拖动上传文件
del : true, // 是否可以删除文件
finishDel : false, // 是否在上传文件完成后删除预览
/* 外部获得的回调接口 */
onSelect: function(files, allFiles){ // 选择文件的回调方法
console.info("当前选择了以下文件：");
console.info(files);
console.info("之前没上传的文件：");
console.info(allFiles);
},
onDelete: function(file, surplusFiles){ // 删除一个文件的回调方法
console.info("当前删除了此文件：");
console.info(file);
console.info("当前剩余的文件：");
console.info(surplusFiles);
},
onSuccess: function (file) {
// 文件上传成功的回调方法
console.info("此文件上传成功：");
console.info(file);
},
onFailure: function(file){ // 文件上传失败的回调方法
console.info("此文件上传失败：");
console.info(file);
},
onComplete: function(responseInfo){ // 上传完成的回调方法
console.info("文件上传完成");
console.info(responseInfo);
}
});
});
后台方法（此处只是简单的实现图片上传，图片大小验证，格式验证，异常处理基本都没做，需要的自己添加，一般可以参考自己之前做过的案例就可以）：
[HttpPost]
public JsonResult UploadPicture()
{
return upFile(this);
}
public JsonResult upFile(Controller cxt)
{
try
{
uploadpath = Server.MapPath("/Upload/");
uploadFile = cxt.Request.Files[0];
oldName = uploadFile.FileName;
if (!Directory.Exists(uploadpath))
{
Directory.CreateDirectory(uploadpath);
}
fileName = Guid.NewGuid().ToString() + uploadFile.FileName.Substring((uploadFile.FileName.LastIndexOf('.')), (uploadFile.FileName.Length- uploadFile.FileName.LastIndexOf('.')));
uploadFile.SaveAs(uploadpath + fileName);
return Json(new {Code=0,Message="上传成功！" });
}
catch (Exception ex)
{
return Json(new { Code = 1001, Message = "上传失败！"+ex.Message });
}
}
2018年06月07日 上午9:44 沙发
2018年06月09日 下午12:29 1层
@湖畔的小鸡 上传图片后消失还没研究过，不过插件不是提供了上传成功后的回调函数么，删除图片的话还要写服务端方法，过几天我来写一个吧
2018年07月26日 上午11:48 板凳
方法里面的参数Controller ，提示无法创建抽象类
2018年07月26日 上午11:58 地板
上面那个问题解决了 ，但怎么把数据库的图片绑定到这个插件上面呢
2018年07月26日 下午12:37 1层
@sss 当时没实现这个效果，空了帮你看下