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 自定义上传附件的图片悬浮层显示的更多相关文章

  1. 上传附件（图片base64）封装方法

    上传附件(图片base64)封装方法 php 上传附件,base64 项目中封装的接口: public function error($msg){ header("Content-type: ...

  2. Microsoft Dynamics CRM 批量上传web资源（非官方WebResourceUtility）并替换实体图标

    背景: 去年以前可以按照目录WebResourceUtility批量上传web资源,昨天发现用不了了,拿到WebResourceUtility源码改了一下都不是很方便,感觉官方写的太冗余,太长了,跟我 ...

  3. file 自定义上传附件并展示缩略图

    效果图镇楼..   写的有点乱.上传一个实例供大家参考--附件下载地址如何下: https://files.cnblogs.com/files/fchx91/uploadFiles.rar 2019- ...

  4. Kindeditor编辑器上传附件，自动获取文件名显示。

    大部分在线编辑器在上传附件之后都是会以路径的形式显示出来很不友好.类似这样..怎么样显示成这样用户上传的原始文件名呢.就是这样.是不是看着很友好. kindeditor编辑器上传文件是已插件的形式调用 ...

  5. ueditor单独调用上传附件和图片的功能

    javascript富文本编辑器使我们添加.编辑网站中的文章更加方便和容易.这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以 ...

  6. jmeter 上传附件 如图片

    1.要勾选 Use multipart/form-data for POST,否则request中将不包含上传的文件 2.MIME类型为application/octet-stream 图如下:对应 ...

  7. React项目中使用wangeditor以及扩展上传附件菜单

    在最近的工作中需要用到富文本编辑器,结合项目的UI样式以及业务需求,选择了wangEditor.另外在使用的过程中发现wangEditor只有上传图片和视频的功能,没有上传文本附件的功能,所以需要对其 ...

  8. form表单上传附件的几种方法

    问题描述:在网页开发过程中,当需要上传附件(图片,音频,视频等)时,常规方法是使用form表单进行提交,这里总结一下form表单提交的几种方法. 参考地址:http://www.cnblogs.com ...

  9. Dynamic CRM 2013学习笔记（十三）附件上传 / 上传附件

    上传附件可能是CRM里比较常用的一个需求了,本文将介绍如何在CRM里实现附件的上传.显示及下载.包括以下几个步骤: 附件上传的web页面 附件显示及下载的附件实体 调用上传web页面的JS文件 实体上 ...

随机推荐

  1. hy 的惩罚

    [问题描述] hy 抄题解又被老师抓住了,现在老师把他叫到了办公室. 老师要 hy 和他 玩一个游戏.如果 hy 输了,老师就要把他开除信息组:  游戏分为 k 轮.在游戏开始之前,老师会将 n 个由 ...

  2. [USACO13OPEN]重力异常

    题目描述 船长正在拯救她的船员,Beefalo 博士. 和所有伟大的冒险故事一样,这个故事也是发生在一个2D平面上的.囧 这个平面是M*N的格子组成的网格,代表着船长的世界的一个侧视图. 有些格子是空 ...

  3. BZOJ4424: Cf19E Fairy

    树上差分的代码很简洁,dfs+差分即可 这题很多坑点啊,比如重边自环好坑 #include<cstdio> #include<cstdlib> #include<algo ...

  4. POJ 1486二分图的必要边

    题意:有n个大小不等透明的幻灯片(只有轮廓和上面的数字可见)A.B.C.D.E…按顺序叠放在一起,现在知道每个幻灯片大小,由于幻灯片是透明的,所以能看到幻灯片上的数字(给出了每个数字的坐标,但不知道这 ...

  5. 【BZOJ2243】【SDOI2011】染色

    题意见试题传送门 解题思路:显然是题树剖题. 考虑用线段树维护区间端点颜色与颜色数,这样就可以方便的合并,注意查询的时候对端点的特殊处理即可. 时间效率最高为\( O (m \log^{2} n) \ ...

  6. 【USACO】股票市场

    题目描述 尽管奶牛天生谨慎,它们仍然在住房抵押信贷市场中大受打击,现在它们准备在股市上碰碰运 气.贝西有内部消息,她知道 S 只股票在今后 D 天内的价格. 假设在一开始,她筹集了 M 元钱,那么她该 ...

  7. NOIP2014-6-14模拟赛

    Problem 1 抓牛(catchcow.cpp/c/pas) [题目描述] 农夫约翰被通知,他的一只奶牛逃逸了!所以他决定,马上出发,尽快把那只奶牛抓回来． 他们都站在数轴上．约翰在N(O≤N≤1 ...

  8. 习题10-1 UVA 11040（无聊水一水）

    题意: 给你一个残缺的塔,每个数字由他下面左右两个数相加得.给你其中一部分,要求输出全部的数字. #include <iostream> #include <cstdio> # ...

  9. Django Class Views

    一.Base views View class django.views.generic.base.View 主要的基于类的基本视图.所有其他基于类的视图都从这个基类继承而来.它不是一个通用的视图,因 ...

  10. IP地址、子网掩码、网关、DNS服务器

    1. IP地址 IP是英文Internet Protocol的缩写,意思是"网络之间互连的协议",也就是为计算机网络相互连接进行通信而设计的协议.在因特网中,它是能使连接到网上的所 ...