为Dynamics CRM注释的图片附件做个预览功能
<!DOCTYPE HTML>
<html>
<head>
<title>微软MVP罗勇测试注释</title>
<style type="text/css">
table {
border:1px solid #666666;
border-collapse:collapse;
}
table thead th {
padding: 8px;
border:1px solid #666666;
background-color: #dedede;
}
table tbody td {
border: 1px solid #666666;
padding: 8px;
background-color: #ffffff;
}
table thead tr th {
font-family:Microsoft YaHei,SimSun,Tahoma,Arial;
font-size:12px;
font-weight:bold;
color:#000000;
}
table tbody tr td {
color:#444444;
font-family:Microsoft YaHei,SimSun,Tahoma,Arial;
font-size:12px;
}
.web_dialog_overlay
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
width: 400px;
height: 450px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 1px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
height:20px;
width:100%;
}
.align_right
{
text-align: right;
}
</style>
<script type="text/javascript" src="../../ClientGlobalContext.js.aspx"></script>
<script type="text/javascript" src="../common/jquery.min.js"></script>
<script type="text/javascript" src="../common/XrmServiceToolkit.min.js"></script>
<script type="text/javascript">
Date.prototype.format = function (fmt) {
var o = {
"M+": this.getMonth() + 1,//月份
"d+": this.getDate(),//日
"h+": this.getHours(),//小时
"m+": this.getMinutes(),//分
"s+": this.getSeconds()//秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ?
(o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
} function ShowDialog(modal) {
$("#overlay").show();
$("#dialog").fadeIn(300); if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function (e) {
HideDialog();
});
}
} function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
} function ShowAttachmentByNoteId(NoteId) {
XrmServiceToolkit.Rest.Retrieve(
NoteId,
"AnnotationSet",
"DocumentBody,MimeType",
null,
function (result) {
var DocumentBody = result.DocumentBody;
var MimeType = result.MimeType;
if (MimeType.indexOf("image") > -1) {
var img = $("<img />");
img.attr("alt", "Embedded Image");
img.attr("src", "data:" + MimeType + ";base64," + DocumentBody);
img.appendTo($("#dialog"));
ShowDialog(true);
}
else {
alert('附件不是图片，目前无法提供查看！');
}
},
function (error) {
alert(error.message);
},
true
);
} $(function () {
var clientUrl = GetGlobalContext().getClientUrl();
//var id = window.parent.Xrm.Page.data.entity.getId(); //这种方法可以获取表单中的很多信息,包括id
var match = RegExp('[?&]id=([^&]*)').exec(window.location.search);//这里是外接通过url传递id的值过来
var id = match && decodeURIComponent(match[1].replace(/\+/g, ' '));
match = RegExp('[?&]typename=([^&]*)').exec(window.location.search);
var typename = match && decodeURIComponent(match[1].replace(/\+/g, ' '));
XrmServiceToolkit.Rest.RetrieveMultiple(
"AnnotationSet",
"?$select=AnnotationId,Subject,NoteText,MimeType,FileName,FileSize,IsDocument,CreatedOn,CreatedBy,ModifiedOn,ModifiedBy&$filter=ObjectTypeCode eq '" + typename + "' and ObjectId/Id eq guid'" + id + "'&$orderby=CreatedOn asc",
function (results) {
for (var i = 0; i < results.length; i++) {
var tr = $("<tr></tr>");
tr.appendTo($("#notestable tbody"));
var td = $("<td>" + (i+1) + "</td>");
td.appendTo(tr);
td = $("<td>" + (results[i].Subject == null ? "" : results[i].Subject) + "</td>");
td.appendTo(tr);
td = $("<td><a href='" + clientUrl + "/main.aspx?etn=annotation&pagetype=entityrecord&id=%7B" + results[i].AnnotationId + "%7D' target='_blank'>" + results[i].NoteText + "</a></td>");
td.appendTo(tr);
td = $("<td>" + results[i].CreatedBy.Name + "</td>");
td.appendTo(tr);
td = $("<td>" + results[i].CreatedOn.format('yyyy-MM-ddThh:mm:ssZ') + "</td>");
td.appendTo(tr);
td = $("<td>" + results[i].ModifiedBy.Name + "</td>");
td.appendTo(tr);
td = $("<td>" + results[i].ModifiedOn.format('yyyy-MM-ddThh:mm:ssZ') + "</td>");
td.appendTo(tr);
td = $("<td>" + (results[i].IsDocument ? "是" : "否") + "</td>");
td.appendTo(tr);
td = $("<td>" + (results[i].FileName == null ? "" : ("<a href='#' data-annotationid='" + results[i].AnnotationId + "'>" + results[i].FileName + "</a>") + "</td>"));
td.find("a").click(function() {
ShowAttachmentByNoteId($(this).attr("data-annotationid"));
});
td.appendTo(tr);
td = $("<td>" + (results[i].FileSize == null ? "" : Math.round((results[i].FileSize)/1024)) + "</td>");
td.appendTo(tr);
}
},
function (error) {
alert(error.message);
},
function () {
},
true
);
$("#dialogclosebtn").click(function (e) {
HideDialog();
e.preventDefault();
});
});
</script>
</head>
<body>
<table id="notestable">
<thead>
<tr>
<th>序号</th>
<th>注释标题</th>
<th>注释内容</th>
<th>创建人</th>
<th>创建时间</th>
<th>修改人</th>
<th>修改时间</th>
<th>是否包含附件</th>
<th>附件名称</th>
<th>附件大小(KB)</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<div class="web_dialog_title"><span id="dialogtitle" style="float:left;">附件内容预览</span><span id="dialogclosebtn" style="float:right;">关闭</span></div>
</div>
</body>
</html>
如果不是图片附件，我会做个提示如下：
为Dynamics CRM注释的图片附件做个预览功能的更多相关文章
- 一、简单的图片上传并预览功能input[file]
一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...
- CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能
本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
- input file实现多选，限制文件上传类型，图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- 原生JS实现图片上传并预览功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于jquery实现图片上传本地预览功能
一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...
- 使用input选择本地图片，并且实现预览功能
1.使用input标签选择本地图片文件 用一个盒子来存放预览的图片 2.JS实现预览 首先添加一个input change事件,再用到 URL.createObjectURL() 方法 用来创建 UR ...
- 分离与继承的思想实现图片上传后的预览功能：ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...
- JAVA图片批量上传JS-带预览功能
这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 <!DOCTYPE html> <%@ taglib prefix=& ...
随机推荐
- cmdb项目-1
1.什么是cmdb 配置管理数据库 ,存储基础设备的各种信息配置等 CMDB可以存储并自动发现整个IT网络上的各种信息,比如一个IT网络上有多少台服务器.多少存储.设备的品牌.资产编号.维护人员.所属 ...
- 「SAP技术」SAP HU上面的'Obj.to Which HU Belongs'栏位初探
SAP HU上面的'Obj.to Which HU Belongs'栏位初探 HU02,创建一个新的HU, 保存之, HU03显示这个HU 189141203942, 其'obj.to Which H ...
- 微服务与Spring Cloud基本概念、Spring Cloud版本命名方式与版本选择
微服务是什么?Spring Cloud是什么?Spring Cloud版本命名方式?Spring Cloud版本选择? 一.微服务是什么 微服务是一种架构风格,是一种将单体应用开发为一组小型服务的方法 ...
- 【转】java的string中，关于split空串总会返回单个元素的数组
原地址:http://blog.sina.com.cn/s/blog_6f3da9650102x03c.html public class Split { public static void mai ...
- 转载 could not find a getter for ... in class ... 异常的原因解析
可能原因如下: 1.真的没有写getter方法(发生几率:1%) 2.*.hmb.xml文件中的属性名和pojo不一致(*.hbm.xml和*.java没衔接好,不一致),字段属性没有正确配置,比如, ...
- MySQL 数据库查询数据，过滤重复数据保留一条数据---（MySQL中的row_number变相实现方法）
转自: http://www.maomao365.com/?p=10564 摘要: 下文讲述MySQL数据库查询重复数据时,只保留一条数据的方法 实现思路: 在MySQL数据库中没有row_numbe ...
- Django—开发具体流程
1.创建Django项目 [root@localhost ~]# django-admin startproject 项目名 [root@localhost ~]# django-admin star ...
- 移动网络游戏实现流程——并借此阐明pomelo在GitHub上各个项目间的关系
<!DOCTYPE html> 摘要:本文通过一个简易流程图介绍如何基于Cocos2d-x引擎和pomelo服务器框架开发一个移动网络游戏.并借此阐明pomelo提供的各个项目间的关系. ...
- 几款常见web扫描器的简要记录
一.前期侦查 为了减少和目标系统的交互(防止触发报警),建议将目标站点镜像一份到本地 httrack(镜像网站到本地) ====> 根据引导填入相关信息即可,使用非常简单 二.扫描 扫描分两种 ...
- Java 的synchronized关键字使用
synchronized 关键字是实现锁的一种方式,是在jvm层面实现的非公平锁,以下是使用synchronized的四种方式 synchronized 特性: 1.非公平锁 2.可重入性 1.作用在 ...