2018-06-04 4,662 views 5

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 });
    }
}

5 条留言访客：3 条博主：2 条

湖畔的小鸡
回复 2018年06月07日上午9:44 沙发

上传服务端后怎样将预览的图片消失？或者上传成功后怎样删除图片？
- 51softs 博主
  回复 2018年06月09日下午12:29 1层
  
  @湖畔的小鸡上传图片后消失还没研究过，不过插件不是提供了上传成功后的回调函数么，删除图片的话还要写服务端方法，过几天我来写一个吧
sss
回复 2018年07月26日上午11:48 板凳

方法里面的参数Controller ，提示无法创建抽象类
sss
回复 2018年07月26日上午11:58 地板

上面那个问题解决了，但怎么把数据库的图片绑定到这个插件上面呢
- 51softs 博主
  回复 2018年07月26日下午12:37 1层
  
  @sss 当时没实现这个效果，空了帮你看下

5 条留言 访客：3 条 博主：2 条

给我留言取消回复

5 条留言访客：3 条博主：2 条