开发者社区> 文艺小青年> 正文

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

简介:
+关注继续查看

系列目录

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的丑图片(没有上传时显示的照片)

 UploadJS方法

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

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

别忘记加入CSS

 View Code

运行结果:

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

运行结果

datagrid代码

 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节代码。来改装一下

 本文转自ymnets博客园博客,原文链接:http://www.cnblogs.com/ymnets/p/5202358.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Asp.Net Web API 2第十一课——在Web API中使用Dependency Resolver
原文:Asp.Net Web API 2第十一课——在Web API中使用Dependency Resolver 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html 本文主要来介绍在Asp.Net Web API使用Web API的Decpendency Resolver在控制器中如何注入依赖。
918 0
JS导出PDF插件(支持中文、图片使用路径)
原文:JS导出PDF插件(支持中文、图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题。它的效果可以先到http://pdfmake.org/playground.html查看。
1842 0
Asp.net MVC Preview 4 中使用RenderComponent
RenderComponent在Pv3及以前版本中经常用到,自从Monorails而来Component就以其方便自然而让我很是喜欢,虽然它性能明显不如Parse/UserControl 在pv4中要使用以下方法来调用组件  n.About()); %> 注意2点 原来的
593 0
SpringBoot-13-插曲之Node文件重命名+自动生成json对象
遇到的问题:图片太多,使用起来挺麻烦 [1]有很多图片放服务器里,怎么能更好的管理,更方便拿到图片呢? [2]想用json 以一个对象数组的形式保存这些图片:以[{img:"图片名"},{img:"图片名"}....]形式 [3]虽说想法是很好,但不可能一条一条自己写吧,好歹咱也是21世纪敲代码的人。
853 0
一起谈.NET技术,分享在MVC3.0中使用jQuery DataTable 插件
  前不久在网络上看见一个很不错的jQuery的DataTable表格插件。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下,推荐该插件的原因。
839 0
3576
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载