2018-06-04  2,155 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 条

  1. 湖畔的小鸡

    :?: 上传服务端后怎样将预览的图片消失?或者上传成功后怎样删除图片?

    • 51softs 博主

      @湖畔的小鸡 上传图片后消失还没研究过,不过插件不是提供了上传成功后的回调函数么,删除图片的话还要写服务端方法,过几天我来写一个吧

  2. sss

    方法里面的参数Controller ,提示无法创建抽象类

  3. sss

    上面那个问题解决了 ,但怎么把数据库的图片绑定到这个插件上面呢

    • 51softs 博主

      @sss 当时没实现这个效果,空了帮你看下

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: