1.easyui实现上传文件，显示图片操作，还有jq双击放大图片操作

Posted 2021-03-01 caijiale

@{
    Layout = "~/Views/_LayoutBase.cshtml";
    <style>
        #demo3 select {
            width: 100%;
        }

        .datagrid-row {
            height: 100px;
            text-align: center;
        }

        .datagrid-cell-c2-FImgUrl {
            height: 100px;
        }

        .datagrid-cell-c2-KImgUrl {
            width: 129px;
            height: auto;
        }
    </style>
    <link href="/Content/uploadify/uploadify.css" rel="stylesheet" />
}
<!--大图框-->
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
</div>
<!--导入商户信息-->
<div id="importProductWindow" class="easyui-window" title="导入商户信息" data-options="iconCls:‘icon-save‘,closed:true" style="width: 520px; height: 200px; padding: 5px;">
    <div class="easyui-layout" data-options="fit:true">
        <div style="padding: 10px;">
            <form id="importProudctForm" enctype="multipart/form-data">
                <table>
                    <tr>
                        <td>选择图片：</td>
                        <td> <input type="file" id="importProductFile" name="importProductFile" /> </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="text-align:center;">
                            <a class="easyui-linkbutton" id="btnImportProductOk" data-options="iconCls:‘icon-ok‘" href="javascript:void(0)" style="width: 80px">确 定</a>
                            <a class="easyui-linkbutton" id="btnImportProductCancel" data-options="iconCls:‘icon-cancel‘" href="javascript:void(0)" style="width: 80px">取 消</a>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>

<script src="~/umditor/umeditor.config.js"></script>
<script src="~/umditor/umeditor.min.js"></script>
<script src="~/umditor/lang/zh-cn/zh-cn.js"></script>
<link href="~/umditor/themes/default/css/umeditor.css" rel="stylesheet" />
@*@if (ViewBag.WxId == 3258)
    {
        <div class="easyui-panel" style="margin-bottom: 10px; padding: 5px;">
            <span>门店:</span>
            <select class="easyui-combobox" style="width:100px;" id="KstoreId"></select>
            <a href="#" class="easyui-linkbutton" id="search" data-options="iconCls:‘icon-search‘">查 询</a>
        </div>
    }*@
<table id="grid" class="easyui-datagrid"></table>

@section javascript{
    <script src="~/Content/javascript/common.js"></script>
    <script src="/Content/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript">
        function imageRetailFormatter(value, row, index) {
            return "<img  src=‘/images/IntroducePic/" +
                value +
                "‘ style=‘border: 1px solid #ffc097;width:80px;height:80px;‘ />";
        }

        $("#btnImportProductOk").click(function() {
            var file = $("#importProductFile")[0];
            if (!file) {
                msgShow("系统提示", "请选择要上传的图片！", "warning");
                return;
            }
            var formData = new FormData();
            formData.append("file", file.files[0]);
            $.ajax({
                cache: false,
                type: "post",
                processData: false,
                contentType: false,
                data: formData,
                url: "/User/ImportRetailIntroduce",
                //url: "/Product/ImportExcelForXHLG",
                beforeSend: ajaxLoading,
                success: function(data) {
                    ajaxLoadEnd();
                    if (data.Status == 1) {
                        msgShow("系统提示", "上传成功！", "info");
                        $("#importProductForm")[0].reset();
                        $("#importProductWindow").window(‘close‘);
                        $("#grid").datagrid("reload");
                    } else {
                        msgShow("系统提示", data.Msg, "warning");
                    }
                },
                error: function(request) {
                    msgShow("系统提示", "服务器端异常！", "warning");
                }
            });
        });
        $("#btnImportProductCancel").click(function() {
            $("#importProductWindow").window(‘close‘);
            $("#importProductForm")[0].reset();
        });
        var tool = [
            {
                id: ‘btnEdit‘,
                text: ‘修改‘,
                iconCls: ‘icon-edit‘,
                handler: function() {
                    //EditBind(1);
                    $("#importProductWindow").window(‘open‘);
                },
            },
            {
                id: ‘btnReload‘,
                text: ‘刷新‘,
                iconCls: ‘icon-reload‘,
                handler: function() {
                    //实现刷新栏目中的数据
                    $("#grid").datagrid("reload");
                },
            }
        ];
        var buttons = "@ViewBag.buttons";

        function BatchOperation() {
            var row = $(‘#grid‘).datagrid(‘getSelected‘);
            if (row) {
                $.messager.confirm(‘删除‘,
                    ‘你确认要删除 ?‘,
                    function(r) {
                        if (r) {
                            $.ajax({
                                type: "post",
                                url: "/Activity/DeleteActivity",
                                async: false,
                                dataType: "json",
                                data: {
                                    "Id": row.PActivityId
                                },
                                success: function(data) {
                                    msgShow("系统提示", "删除成功！", "warning");
                                },
                                error: function(XMLHttpRequest, textStatus, errorThrown) {
                                    $.messager.alert(‘登录超时‘,
                                        ‘操作失败，请重新登录!‘,
                                        "error",
                                        function(r) {
                                            parent.location.reload();
                                        });

                                }
                            });
                        }
                    });


            } else {
                msgShow("系统提示", "请选择活动信息!", "warning");
                return;
            }
            $("#grid").datagrid("reload");
        }

        function reload() { $("#grid").datagrid("reload"); }
        @*function EditBind(type) {
            if (type == 0) {
                $("#imgUrl").val("");
                $("#PActivityId").val(0);
                $("#FName").textbox("setValue", "");
                $("#FStartTime").datetimebox("setValue", "");
                $("#FEndTime").datetimebox("setValue", "");
                $("#FOrder").textbox("setValue", "");
                $("#upload_file_box img").attr("src", "");
                if ("@ViewBag.WxId" == "3258") {
                    $("#storeId").combobox("setValue", "");
                    $("#FPrice").textbox("setValue", "");
                }
                UM.getEditor(‘editor‘).setContent("", false);
            }
            else {
                var row = $(‘#grid‘).datagrid(‘getSelected‘);
                if (row) {
                    $("#imgUrl").val(row.FImgUrl);
                    $("#PActivityId").val(row.PActivityId);
                    $("#FName").textbox("setValue", row.FName);
                    $("#FStartTime").textbox("setValue", row.FStartTime);
                    $("#FEndTime").textbox("setValue", row.FEndTime);
                    $("#FOrder").textbox("setValue", row.FOrder);
                    $("#upload_file_box img").attr("src", "/images/wxid_" + @ViewBag.WxId +"/ProductImage/" + row.FImgUrl);
                    UM.getEditor(‘editor‘).setContent(row.FContent, false);
                    if ("@ViewBag.WxId" == "3258") {
                        $("#storeId").combobox("setValue", row.KStoreId);
                        $("#FPrice").textbox("setValue", row.FPrice);
                    }
                    $("#PActivityId").val(row.PActivityId);
                } else {
                    msgShow("系统提示", "请选择活动信息!", "warning");
                    return;
                }
            }
            $(‘#category‘).panel({ title: "活动详情" });
            $(‘#category‘).panel({ iconCls: "icon-add" });
            $(‘#category‘).window(‘open‘);
        }*@
        var queryData = {};
        queryData["storeId"] = 0;
        $(function() {

            InitGrid();

            $("#btnCancel").click(function() {
                $("#category").window("close");
            });

            function InitGrid() {
                $(‘#grid‘).datagrid({ //定位到Table标签，Table标签的ID是grid
                    url: ‘/User/GetRetailIntroduce‘, //指向后台的Action来获取当前用户的信息的Json格式的数据
                    //title: ‘地区列表‘,
                    iconCls: ‘icon-view‘,
                    height: GetHeight() - 48,
                    width: function() { return document.body.clientWidth * 0.9 }, //自动宽度
                    nowrap: true,
                    loadMsg: "正在加载数据中...",
                    autoRowHeight: false,
                    striped: true,
                    collapsible: true,
                    pagination: true,
                    pageSize: 20,
                    pageList: [20, 50, 100, 200],
                    rownumbers: true,
                    //sortName: ‘Seq‘,    //根据某个字段给easyUI排序
                    sortOrder: ‘asc‘,
                    remoteSort: false,
                    singleSelect: true,
                    idField: ‘PID‘,
                    queryParams: queryData,

                    columns: [
                        [
                            //{ title: ‘编号‘, field: ‘PActivityId‘, width: 70, sortable: false },
                            ///////////////测试前端图片显示不全bug///////////////
                            //{ title: ‘封面图‘, field: ‘KImgUrl‘, width: 130, sortable: false, formatter: imageRetailFormatter },
                            {
                                title: ‘封面图‘,
                                field: ‘KImgUrl‘,
                                width: 130,
                                formatter: imageRetailFormatter,
                                align: ‘center‘
                            },
                        ]
                    ],
                    toolbar: tool,
                    onDblClickRow: function(rowIndex, rowData) {
                        //$("#importProductWindow").window(‘open‘);
                        var row = $(‘#grid‘).datagrid(‘getSelected‘);
                        if (row) {
                            //得到选中的图片路径
                            var imgpath = "/images/IntroducePic/" + row.KImgUrl;
                            $(‘#bigimg‘).attr("src", imgpath);//设置#bigimg元素的src属性
                            /*获取当前点击图片的真实大小，并显示弹出层及大图*/  
                            $("<img/>").attr("src", imgpath).load(function(){  
                                var windowW = $(window).width();//获取当前窗口宽度  
                                var windowH = $(window).height();//获取当前窗口高度  
                                var realWidth = this.width;//获取图片真实宽度  
                                var realHeight = this.height;//获取图片真实高度  
                                var imgWidth, imgHeight;  
                                var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  
              
                                if(realHeight>windowH*scale) {//判断图片高度  
                                    imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放  
                                    imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度  
                                    if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度  
                                        imgWidth = windowW*scale;//再对宽度进行缩放  
                                    }  
                                } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度  
                                    imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放  
                                    imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度  
                                } else {//如果图片真实高度和宽度都符合要求，高宽不变  
                                    imgWidth = realWidth;  
                                    imgHeight = realHeight;  
                                }  
                                $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放  
              
                                var w = (windowW-imgWidth)/2;//计算图片与窗口左边距  
                                var h = (windowH-imgHeight)/2;//计算图片与窗口上边距  
                                $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性  
                                $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  
                            });  
                            $(outerdiv).click(function(){//再次点击淡出消失弹出层  
                                $(this).fadeOut("fast");  
                            });  
                        }
                    },
                    onLoadSuccess: function(data) {
                        if (data.total == 0) {
                            //添加一个新数据行，第一列的值为你需要的提示信息，然后将其他列合并到第一列来，注意修改colspan参数为你columns配置的总列数
                            $(".datagrid-view2 .datagrid-body")
                                .append("<div class=‘divNone‘><i></i><span>没有符合条件的数据</span></div>");
                            //隐藏分页导航条，这个需要熟悉datagrid的html结构，直接用jquery操作DOM对象，easyui datagrid没有提供相关方法隐藏导航条
                            $(this).closest(‘div.datagrid-wrap‘).find(‘div.datagrid-pager‘).hide();
                        }
                        //如果通过调用reload方法重新加载数据有数据时显示出分页导航容器
                        else {
                            $(".divNone").remove();
                            $(this).closest(‘div.datagrid-wrap‘).find(‘div.datagrid-pager‘).show();
                        }
                    }
                });

            }
        });

    </script>
}

配合后端C#代码

public ActionResult RetailIntroduce()
        {
            return View();
        }

        public ActionResult GetRetailIntroduce()
        {
            var pageindex = int.Parse(Request.Form["page"]);
            var pagesize = int.Parse(Request.Form["rows"]);
            int count = 0;
            using (YXXEntities entity = new YXXEntities())
            {
                var PID = 1;
                var KImgUrl = Server.MapPath($@"YXXServerIntroducePic123.jpg");
                List<TRetailIntroduce> retailIntroduces = new List<TRetailIntroduce>();
                retailIntroduces = entity.TRetailIntroduce.Where(p => p.PID > 0).OrderBy(p => p.PID).Skip((pageindex - 1) * pagesize).Take(pagesize).ToList();
                count = entity.TRetailIntroduce.Count(p => p.PID > 0);
                var jsonMap = new Dictionary<string, object>();
                jsonMap.Add("total", count);
                jsonMap.Add("rows", retailIntroduces);
                return Content(JsonConvert.SerializeObject(jsonMap));
            }

            //var uploadPath = Server.MapPath($@"YXXServerstoremember123.jpg");
            //var pageindex = int.Parse(Request.Form["page"]);
            //var pagesize = int.Parse(Request.Form["rows"]);
            //int count = 0;
            //var jsonMap = new Dictionary<string, object>();
            //jsonMap.Add("total", count);
            //jsonMap.Add("rows", storeMembers);
            //return Content(JsonConvert.SerializeObject(jsonMap));
            return null;
        }

        public ActionResult ImportRetailIntroduce(HttpPostedFileWrapper file)
        {
            if (file == null || file.ContentLength == 0)
            {
                return Json(new { Status = 0, Msg = "不允许上传空文件" });
            }

            var ext = Path.GetExtension(file.FileName).ToLower();
            if (ext != ".png" && ext != ".jpg" && ext != ".jpeg" && ext != ".bmp")
            {
                return Json(new { Status = 0, Msg = "只支持上传图片文件，文件扩展名为 .png 或 .jpg 或 .jpeg 或 .bmp" });
            }

            using (var db = new YXXEntities())
            {
                var saveFileName = DateTime.Now.ToString("yyyyMMddHHmmss_") + file.FileName;
                var uploadPath = Server.MapPath($@"imagesIntroducePic{saveFileName}");
                file.SaveAs(uploadPath);
                //todo:这个如果到时要改逻辑就是在这里加个id然后去条件判断还有修改这里的逻辑
                TRetailIntroduce retailIntroduce = db.TRetailIntroduce.FirstOrDefault(p => p.PID == 1);
                retailIntroduce.PID = 1;
                retailIntroduce.KImgUrl = saveFileName;
                db.Entry(retailIntroduce).State = EntityState.Modified;
                db.SaveChanges();
                //if (System.IO.File.Exists(uploadPath))
                //{
                //    System.IO.File.Delete(uploadPath);
                //}
                return Json(new { Status = 1, Msg = "" });
                //这里少了try catch，先测试然后再来
            }
        }