ASP.NET MVC 使用zyUpload插件实现多图上传 讲解+源码
1、zyUpload归根结底是使用H5的新特性实现多图上传的 <input type="file" multiple />,在ASP.NET Webform中我们可以请求ashx文件,通过获取HttpContext获取上传的文件流信息,而在MVC中,我们通过Controller就可以获取到这些数据。
2、网络下载的zyUpload 静态案例 下载地址 zyUpload 静态文件资源
3、结合ASP.NET MVC 后台进行图片上传:
实现效果如下:
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 当时没实现这个效果,空了帮你看下