Dynamics CRM 自定义上传附件的图片悬浮层显示

原创 2015年11月19日 15:29:23

          CRM中的附件是以流的形式保存在了数据库中,这样做的一个坏处是一旦系统运行时间久,附件上传的多了势必会导致数据库极速扩大,即影响系统的运行效率也对后期的迁移维护带来了不必要的麻烦。所以很多的客户都会要求把附件存储在物理硬盘上,针对这种需求就只能自定义开发了。

      我曾一个项目里给客户做过一个简单的自定义上传的web resource,主要用来存储客户的产品图片,当时做的比较槽本着能用就可以的态度,客户也没有太多的要求。

      具体的效果就是下面图中这样,图片放在了一个ftp文件服务器上,上传后就会在框中显示一个超链接,如果你要查看就点击这个链接就可以,但每点一次就会打开一个新的网页窗口显示一张图片,查看完了就关闭这个网页窗口,总感觉不是很人性化。最好的点击链接当前页弹出个悬浮层,查看关闭等操作全部在当前页完成,这样就比较舒服了。


      直接上代码,下面的代码只贴了点击链接弹出悬浮层,然后再关闭悬浮层,不包含上传附件的功能。

<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var div = parent.document.createElement("div");
            div.id = "overlay";
            div.style.position="fixed";
            div.style.top="0";
            div.style.right="0";
            div.style.bottom="0";
            div.style.left="0";
            div.style.height="100%";
            div.style.width="100%";
            div.style.margin="0";
            div.style.padding="0";
            div.style.background=" #000000";
            div.style.opacity=".15";
            div.style.filter=" alpha(opacity=15)";
            div.style.display="none";
            parent.document.body.appendChild(div);

            var divImg =parent.document.createElement("div");
            divImg.id = "dialogImg";
            divImg.style.display="none";
            divImg.style.position="fixed";
            divImg.style.width="250px";
            divImg.style.height="280px";
            divImg.style.top="50%";
            divImg.style.left="50%";
            divImg.style.marginLeft="-190px";
            divImg.style.marginTop="-100px";
            divImg.style.backgroundColor="#ffffff";
            divImg.style.border="2px";
            divImg.style.borderStyle="solid";
            divImg.style.fontFamily="Verdana";
            divImg.style.fontSize="10pt";
            divImg.style.padding="0";
            divImg.style.zIndex="102";

            var table = parent.document.createElement("table");
            table.style.width = "100%";
            table.style.border = "0";
            table.cellPadding = "2";
            table.cellSpacing = "0";
            var tr1 = parent.document.createElement("tr");
            var td1 = parent.document.createElement("td");
            td1.style.borderBottom="solid";
            td1.style.border="1px";
            td1.style.borderColor="#2a1d54";
            td1.style.backgroundColor="#2a1d54";
            td1.style.padding="4px";
            td1.style.color="White";
            td1.style.fontWeight="bold";
            td1.innerText = "照片预览";
            var td11 = parent.document.createElement("td");
            td11.style.textAlign = "right"
            td11.style.borderBottom = "solid";
            td11.style.border = "1px";
            td11.style.borderColor = "#2a1d54";
            td11.style.backgroundColor = "#2a1d54";
            td11.style.padding = "4px";
            var a1 = parent.document.createElement("a");
            a1.style.color = "White";
            a1.style.fontWeight = "bold";
            a1.innerText = "关闭";
            a1.id = "btnCloseImg";
            a1.href = "#";
            a1.onclick = function (e) {
                debugger;
                $("#overlay",parent.document).hide();
                $("#dialogImg",parent.document).fadeOut(300);
                e.preventDefault();
            }
            td11.appendChild(a1);
            tr1.appendChild(td1);
            tr1.appendChild(td11);
            var tr2 = parent.document.createElement("tr");
            var td2 = parent.document.createElement("td");
            td2.colSpan = "2";
            var img = parent.document.createElement("img");
            img.id = "img1";
            td2.appendChild(img);
            tr2.appendChild(td2);
            table.appendChild(tr1);
            table.appendChild(tr2);
            divImg.appendChild(table);
            parent.document.body.appendChild(divImg);
            $("#a2").click(function (e) {
                $("#overlay",parent.document).show();
                $("#dialogImg",parent.document).fadeIn(300);
                $("#img1",parent.document).attr("src", this.href);
                $("#overlay",parent.document).unbind("click");
                e.preventDefault();
            });
});
    </script>
</head>
<body>
    <form enctype="multipart/form-data">
        <a id="a2" href="ftp://121.40.226.176:22/hui.jpg">图片1</a>
        <div>
            <input name="upload" id="upload" type="file" accept=".xls,.docx,.txt,.pdf,.png,.jpg,.jpeg" runat="server">
            <input id="btn" onclick="btnclick();" type="submit" value="上传" runat="server">
        </div>
    </form>
</body>
</html>
          效果就下面这样,点击图片1链接打开照片浏览窗口,看完了点击关闭按钮。所有的悬浮层div均是通过web resource中的html动态生成的,而图片的显示是通过在弹出层中放一个img控件,动态指定他的url路径。如果你的图片的大小不一,你可以试着根据图片的长宽来动态的调整弹出层的css信息中的的长宽。


      后面我们可以考虑下,如果是系统自带的附件功能,图片类型的附件查看是不是也可以做到这种效果(目前的自带功能是点击附件后即下载附件)。


本文的功能参考了如下博文的内容:

http://luoyong0201.blog.163.com/blog/static/11293052015917114158845/

http://www.ezzylearning.com/tutorial/creating-popup-dialog-windows-using-jquery

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Dynamics CRM 2011编程系列(45):编程实现文档上传功能

在Dynamics CRM 2011 系统中,我们可以为每条记录添加注释。注释可以是一行简单的字符或者是一个文件,下面我们来看看怎么通过编程的方式为系统添加注释。我们来看个简单的例子吧。操作步骤图1图...

Dynamics CRM 2011 编程系列:自定义工作流

转自 图片上的博客地址: 在Dynamics CRM系统中支持可配置的工作流功能,该功能类似Plugin可以根据实体的某些条件而自动触发。比如当实体创建时或实体的某个属性被更改时,当...

Dynamics CRM 2011 编程系列(29):自定义页面

在日常开发过程中难免碰到些古怪的需求,以至于Dynamics CRM提供的标准功能都无法完成该功能。这个时候选择开发自定义页面就是个不错的选择,通过使用ASP.NET来构建灵活的Web页面并调用Dyn...

Dynamics CRM 2011 编程系列(30):使用ASP.NET Ajax技术的自定义页面

在上篇博文中讨论了怎么在Dynamics CRM中使用自定义页面,现在我们来看看怎么在自定义页面中使用Asp.net Ajax框架。Asp.net Ajax是个优秀的Ajax框架,用它来开发Ajax应...

Dynamics CRM 修改自定义实体名字及属性前缀(架构名称)

Dynamics CRM 修改自定义实体名字及属性前缀(架构名称)

Dynamics CRM2016 通过web api来调用自定义action之global action

上篇介绍web api调用自定义action中用到的demo是基于特定的实体,那本篇要分享的是global action,区别在于一个是私有方法一个是公用方法(个人理解的说法)。     如何新建一个...

Dynamics CRM 2015 Update 1 系列(4): 自定义主键 - Alternate Keys

Alternate Keys, 还是和系统集成相关的一个重量级Feature。使用该Feature能极大的提高开发数据集成接口的时间成本以及接口的运行效率。 在之前的Dynamics CRM 版本中...

Dynamics CRM2011自定义框架解决方案

Dynamics CRM2011自定义框架解决方案 一、  目的 许多客户习惯之前系统自定义开发的页面、操作习惯或界面风格,但使用了Dynamics CRM2011后只能使用产品自带的风格。为解决...
  • lujyu99
  • lujyu99
  • 2014年06月24日 22:26
  • 983

Dynamics CRM 2011 编程系列(26):自定义工作流

在Dynamics CRM系统中支持可配置的工作流功能,该功能类似Plugin可以根据实体的某些条件而自动触发。比如当实体创建时或实体的某个属性被更改时,当然还可以直接手动触发该流程。     本文...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Dynamics CRM 自定义上传附件的图片悬浮层显示
举报原因:
原因补充:

(最多只允许输入30个字)