Layui__上传多图上传

Posted 2020-12-09 kikyoqiang

前端

                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upload_pictures">多图片上传</button>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red;font-size:13px;">*按住Ctrl键,选择多图</span>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="previewId" style="max-width:750px;"></div>
                    </blockquote>
                </div>

        //多图片上传
        upload.render({
            elem: ‘#upload_pictures‘
            , url: ‘/ExhibitAdmin/AdminAJAX/UploadResult‘ //改成您自己的上传接口
            , multiple: true
            , auto: false  //auto 参数必须设置为false
            , exts: ‘jpg|png|jpeg‘
            , choose: function (obj) {  //上传前选择回调方法
                var flag = true;
                obj.preview(function (index, file, result) {
                    console.log(file);            //file表示文件信息，result表示文件src地址
                    var exhibitorId = $("#ExhibitorId").val();
                    if (exhibitorId == ‘‘ || exhibitorId == ‘999‘) {
                        layer.closeAll(‘loading‘);
                        layer.msg("请选择XXX", { icon: 2, time: 2000 });
                        return false;
                    }
                    $(‘#previewId‘).append(‘<img src="‘ + result + ‘" alt="‘ + file.name + ‘" class="layui-upload-img">‘)
                    var img = new Image();
                    img.src = result;
                    img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                        obj.upload(index, file); //满足条件调用上传方法Q
                        //if (img.width == 343 && img.height == 240) {
                        //    obj.upload(index, file); //满足条件调用上传方法
                        //} else {
                        //    flag = false;
                        //    layer.msg("您上传的小图大小必须是343*240尺寸！");
                        //    return false;
                        //}
                    }
                    return flag;
                });
            }
            , before: function (obj) {
                layer.load();
                this.data = { "exhibitorId": $("#ExhibitorId2").val() }//携带额外的数据
                //预读本地文件示例，不支持ie8
                //obj.preview(function (index, file, result) {
                //    $(‘#previewId‘).append(‘<img src="‘ + result + ‘" alt="‘ + file.name + ‘" class="layui-upload-img">‘)
                //});
            }
            , done: function (data) {
                console.log(data);
                layer.closeAll(‘loading‘);
                if (data.result == 1) {
                    var imgUrl = $("#ImgUrl").val();
                    $("#ImgUrl").val(imgUrl + "," + data.data.filename);
                    layer.msg(data.msg, { icon: 1, time: 2000 });
                    $("#previewId").find("img").each(function () {
                        $(this).css("max-width", "700px");
                        $(this).css("margin-top", "10px");
                    });
                }
                else {
                    layer.msg(data.msg, { icon: 2, time: 2000 });
                }
            }
        });

后台

        public JsonResult UploadResult()
        {
            string exhibitorId = Request.Params["exhibitorId"];
            string filename = "";
            bool isOk = false;
            foreach (string uploadFile in Request.Files)
            {
                HttpPostedFileBase file = Request.Files[uploadFile] as HttpPostedFileBase;
                foreach (string item in System.Web.HttpContext.Current.Application["AllowPicType"].ToString().Replace("‘", "").Replace(" ", "").Split(‘,‘))
                {
                    if (file.FileName.EndsWith(item, true, null))
                    {
                        string path = "/exhibitoupload/" + exhibitorId + "/result/";
                        if (!Directory.Exists(Server.MapPath(path)))
                        {
                            Directory.CreateDirectory(Server.MapPath(path));
                        }
                        //filename = path + DateTime.Now.ToString("yyyyMMddHHmmss") + new Random().Next(1000, 9999) + "." + item;
                        filename = path + Guid.NewGuid() + "." + item;
                        file.SaveAs(Server.MapPath(filename));
                        isOk = true;
                    }
                }
            }
            AjaxResult ajaxResult = new AjaxResult();
            if (isOk)
            {
                ajaxResult.result = 1;
                ajaxResult.msg = "上传成功";
            }
            else
            {
                ajaxResult.result = 0;
                ajaxResult.msg = "上传失败";
            }
            ajaxResult.data.Add("filename", filename);
            return Json(ajaxResult, JsonRequestBehavior.AllowGet);
        }