ASP.NET MVC5+EF6+EasyUI 后台管理系统（56）-插件---单文件上传与easyui使用fancybox

2022-10-06 08:30:30

系列目录

https://yunpan.cn/cZVeSJ33XSHKZ 访问密码 0fc2

今天整合lightbox插件Fancybox1.3.4，发现1.3.4版本太老了。而目前easyui 1.4.x的jquery的版本已经到达1.11.x以上。

本以为不能再使用这个插件，但是发现还是有人重写了插件的方法让其支持jquery 1.11.x以上，最上面是下载地址。

不过有收费插件fancybox2.0，本身支持高版本的jquery，大家可以使用

使用fancybox非常简单。解压包下的index基本有所有例子

直接运行结果：

显示非常动感。

以SysSample例子为例子构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（8）-MVC与EasyUI DataGrid 分页

必须让SysSample支持上传文件上传构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（32）-swfupload多文件上传[附源码]

我之前只发布过多文件上传的源码，实际多文件上传里面也包含了单文件上传。

（整合你自己项目时候忽略easyui。可能是的表格插件是datatable,jqgrid,extjs等，但是基本同理）

修改Create.cshtml代码

 <tr>

                <td style="width:100px; text-align:right;">

                    @Html.LabelFor(model => model.Photo)：

                </td>

                  <td>

                      @Html.TextBoxFor(model => model.Photo)

                    </td>

                <td>

                    @Html.ValidationMessageFor(model => model.Photo)

                </td>

            </tr>

为

 <tr>

                <th>

                    @Html.LabelFor(model => model.Photo)：

                </th>

                <td>

                    @Html.HiddenFor(model => model.Photo)

                    <img class="expic" src="/Content/Images/NotPic.jpg" /><br />

                    <a href="javascript:$('#FileUpload').trigger('click');" class="files">

                        <input type="file"  id="FileUpload" name="FileUpload" onchange="Upload('SingleFile', 'Photo', 'FileUpload','1','1');" />

                    </a><span class="uploading">请稍候...</span>

                    @Html.ValidationMessageFor(model => model.Photo)

                </td>

            </tr>

NotPic.jpg图片为 ，这个是我自己PS的丑图片(没有上传时显示的照片)

//文件上传

function Upload(action, repath, uppath, iswater, isthumbnail, filepath) {

    var sendUrl = "/Core/upload_ajax.ashx?action=" + action + "&ReFilePath=" + repath + "&UpFilePath=" + uppath;

    //判断是否打水印

    if (arguments.length == 4) {

        sendUrl = "/Core/upload_ajax.ashx?action=" + action + "&ReFilePath=" + repath + "&UpFilePath=" + uppath + "&IsWater=" + iswater;

    }

    //判断是否生成宿略图

    if (arguments.length == 5) {

        sendUrl = "/Core/upload_ajax.ashx?action=" + action + "&ReFilePath=" + repath + "&UpFilePath=" + uppath + "&IsWater=" + iswater + "&IsThumbnail=" + isthumbnail;

    }

    //自定义上传路径

    if (arguments.length == 6) {

        sendUrl = filepath + "tools/upload_ajax.ashx?action=" + action + "&ReFilePath=" + repath + "&UpFilePath=" + uppath + "&IsWater=" + iswater + "&IsThumbnail=" + isthumbnail;

    }

    //开始提交

    $("form").ajaxSubmit({

        beforeSubmit: function (formData, jqForm, options) {

            //隐藏上传按钮

            $("#" + repath).nextAll(".files").eq(0).hide();

            //显示LOADING图片

            $("#" + repath).nextAll(".uploading").eq(0).show();

        },

        success: function (data, textStatus) {

            if (data.msg == 1) {

                $("#" + repath).val(data.msgbox.split(",")[0]);

                $("#" + repath).next("img").attr("src", data.msgbox.split(",")[0]);

            } else {

                alert(data.msgbox);

            }

            $("#" + repath).nextAll(".files").eq(0).show();

            $("#" + repath).nextAll(".uploading").eq(0).hide();

        },

        error: function (data, status, e) {

            alert("上传失败，错误信息：" + e);

            $("#" + repath).nextAll(".files").eq(0).show();

            $("#" + repath).nextAll(".uploading").eq(0).hide();

        },

        url: sendUrl,

        type: "post",

        dataType: "json",

        timeout: 600000

    });

};

UploadJS方法

后台方法提取32节的upload_ajax.ashx文件即可

这样就完成支持单文件上传了

别忘记加入CSS

a.files, a.files input{ outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/ }

.uploading{ float:left; background:url(loading2.gif) no-repeat left center; padding-left:18px;display:none; line-height:24px; height:24px; color:#333; }

.expic{cursor: pointer; width: 140px; height: 140px; border: 1px #ccc solid;}

.uploading{ float:left; background:url(Images/loading2.gif) no-repeat left center; padding-left:18px;display:none; line-height:24px; height:24px; color:#333; }

#FileUpload{ width:140px;}

运行结果：

记得添加多点数据，这样才比较好看

运行结果

datagrid代码

$('#List').datagrid({

            url: '/SysSample/GetList',

            width: SetGridWidthSub(10),

            methord: 'post',

            height: SetGridHeightSub(39),

            fitColumns: true,

            sortName: 'Id',

            sortOrder: 'desc',

            idField: 'Id',

            pageSize: 10,

            pageList: [10, 20, 30, 40, 50],

            pagination: true,

            striped: true, //奇偶行是否区分

            singleSelect: true,//单选模式

            //rownumbers: true,//行号

            onLoadSuccess: function (data) {

                $("a.example").fancybox();

            },

            columns: [[

                { field: 'Id', title: '@Resource.TitleID', width: 80,sortable: true },

                { field: 'Name', title: '@Resource.TitleName', width: 60 },

                { field: 'Age', title: '年龄', width: 50, align: 'right' },

                { field: 'Bir', title: '生日', width: 80, align: 'right', formatter: function (value) { return SubStrYMD(value) } },

                {

                    field: 'Photo', title: '照片', width: 100, align: 'center', formatter: function (value, row, index) {

                        return '<a class="example" title="'+row.Note+'" href="' + value + '"><img width="80px" alt="example" src="' + value + '" /></a>';

                    }

                },

                { field: 'Note', title: '@Resource.TitleRemark', width: 260 },

                { field: 'CreateTime', title: '@Resource.TitleCreateTime', width: 160, align: 'center' }

            ]]

        });

index.cshtml

 {

                    field: 'Photo', title: '照片', width: 100, align: 'center', formatter: function (value, row, index) {

                        return '<a class="example" title="'+row.Note+'" href="' + value + '"><img width="80px" alt="example" src="' + value + '" /></a>';

                    }

                },

核心代码解析。这段代码来源于fancybox插件的第一个样例代码。

但是插件代码只演示了ID方式的显示，我们需要变通一下用class而已(下面是easyui逐行生成后的代码)

<a class="example" title="这世界上除了你自己，没有谁可以真正帮到你。" href="/upload/201602/17/201602171809062531.jpg"><img width="80px" alt="example" src="/upload/201602/17/201602171809062531.jpg"></a>

所以我们在初始化时候必须使用class方式：即

$("a.example").fancybox();

代码必须写在datagrid加载之后。不能写在$(function(){});里面。因为$(function(){});比datagrid初始化可能更快

onLoadSuccess: function (data) {
　　$("a.example").fancybox();
},

运行结果：

如果你的记录支持多张图片。那么必须再新建一张图片子表来关联。

然后用到样例中的：多张显示

代码用组的方式：

$("a[rel=example_group]").fancybox({

                'transitionIn'        : 'none',

                'transitionOut'        : 'none',

                'titlePosition'     : 'over',

                'titleFormat'        : function(title, currentArray, currentIndex, currentOpts) {

                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';

                }

            });

本文到此为止！有兴趣下载32节代码。来改装一下

码农公寓

相关文章