您的位置：首页 > 其它

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

2015-11-19 15:29 260 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航